css pseudo-class, pseudo-element_html/css_WEB-ITnose

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