Practical skills of sharing css pseudo elements in web front end training series of good programmers
1. Definition: pseudo elements are used to create and style elements that are not in the document tree. For example, we can add some text before and after an element through: before: after, and add styles to the text. Although the user can see the text, it is not actually in the document tree.
2. Single and double colons of pseudo elements
When the specification is not clear before CSS2, the pseudo element is represented by a single colon (:);
In the CSS3 specification, double colons (::) are required to represent pseudo elements to distinguish between pseudo elements and pseudo classes; however, for upward compatibility, single colons (:) are also available now.
3. Use scenario
Next, use before and after to insert pseudo elements in front of and behind the elements to achieve some interesting small effects, code and renderings attached.
3.1 using pseudo elements to insert text and Font Icon Library
3.1.1 insert text:
h1:before {
content: "hello"; / insert text before the title and set the style/
color: pink;
font-size: 20px;
width: 40px;
height: 40px; }

I'm the title

The effect is as follows:
3.1.2 insert iconfont Font Icon Library:
@font-face {

font-family: 'iconfont';
src: url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.eot');
src: url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.eot?#iefix') format('embedded-opentype'),
    url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.woff2') format('woff2'),
    url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.woff') format('woff'),
    url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.ttf') format('truetype'),
    url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.svg#iconfont') format('svg');}

h1:before {

font-family: "iconfont" !important;
/* Make sure to add */
content: "\e601";
color: pink;
font-size: 20px;
width: 40px;
height: 40px;}

I'm the title

According to the renderings, we can see that the pseudo element is an inline element type
3.2 clear float
Solve the problem of height collapse of parent element caused by floating
.clear:after {

 content: "";
 display: block;
 clear: both;

}
ul{

 background:pink;

}
li{

 float:left;
 margin:0 20px;}

 <li>hello world</li>
 <li>hello world</li>
 <li>hello world</li>
 <li>hello world</li>

3.3 split line effect
p:before{

content:'';
display:inline-block;
width:100px;
height:2px;
background:pink;
margin:5px;

}
p:after{

content:'';
display:inline-block;
width:100px;
height:2px;
background:pink;
margin:5px;

}

Dividing line

design sketch:
3.4 dialog effect
div {

width: 180px;
height: 36px;
line-height: 36px;
background: #c0eeff;
border-radius: 5px;
font-size: 14px;
text-align: center;
position: relative;}

div:before {

content: "";
position: absolute;
top: 10px;
left: -14px;
/* Draw a triangle */
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 20px solid #c0eeff;
border-bottom: 10px solid transparent;
border-left: 0 solid #c0eeff;

}

The renderings are as follows:
3.5 photo stacking effect
div {

width: 400px;
height: 300px;
border: 8px solid #eee;
position: relative;}

div img {

width: 100%;
height: 100%;}

div:before,div:after {

content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 400px;
height: 300px;
border: 8px solid #eee;
transform: rotate(8deg);}

div:after {

transform: rotate(-8deg);}

The renderings are as follows:
summary
Using pseudo elements can achieve a lot of effects, and also reduce the use of tags in web pages. Let's try the magic tricks of pseudo elements together.