Css pseudo-class, pseudo-element, and css pseudo-class Element

Css pseudo-class, pseudo-element, and css pseudo-class Element

The pseudo class acts on the entire element, for example:

A: link {color: #111 ;}

A: hover {color: #222 ;}

Div: first-child {color: #333 ;}

Although none of these conditions are based on Dom, none of the Results act on a complete element, such as the entire Link, paragraph, and div;

 

A pseudo element acts on a part of an element, for example:

P: first-line {color: #555 ;}

P: first-letter {color: #666 ;}

A pseudo element acts on a part of an element, the first line of a paragraph or the first letter;

 

: Before works the same as: before. The former is css2 and the latter is css3.

 

Role 1:

: Before AND: after can increase the complexity of the pure css design. No extra labels are required. We can use pseudo elements to add extra printable elements or layers. For example, if you want to add a phone icon in front of the phone number font, you can do this:

. PhoneNumber: before {

     content : "☎" ;      font-size : 15px ; } Role 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 merge, and after is used to clear floating