Pseudo class applies to the entire element, such as:
a:link{color:#111;}
div:first-child{color:#333;}Although these conditions are not based on DOM, none of the results are applied to a complete element, such as an entire link, paragraph, div etc.;
pseudo-element acts on part of the element, for example:
p::first-line{color:#555;}
p ::first-letter{color:#666;}
The pseudo-element acts on a part of the element, the first line or the first letter of a paragraph;
:before has the same effect as ::before, the former is written in css2, and the latter is written in css3
Function 1:
:before and :after can add pure The complexity of CSS design does not require redundant tags. We can use pseudo-elements to add additional styleable elements or levels. For example, if we want to add a phone icon in front of the phone number font, we can do this:
.phoneNumber:before {
content : "☎" ;
font-size : 15px ;
}
Function 2:
Clear floating
/* For modern browsers */
. cf:before, .cf:after {
content : "" ;
display :table;
}
.cf:after {
clear : both ;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom : 1 ;
}
Here: before prevents top-margin merging, and :after is used to clear floats