Examples of pseudo-elements in CSS and their differences from pseudo-classes

pseudo Element

We know that as the CSS specification is further improved, there are more and more new CSS artifacts, but in the daily development, we commonly used and browser support situation is more optimistic when the number of before and after. But we use it in our daily development: after {content: ";} To clear the float, and add an element (take care of the IE8 browser here using a single colon). But what are the desirable values of content?
1. String: Content: "A string"-note: special characters must use Unicode encoding;
2. Picture: Content:url (/path/to/benjamin.png) – The picture is inserted in its original size and cannot be resized. Because the image supports gradients, you can use a gradient effect on the pseudo-elements;
3. No character: Content: ""-this is useful in clearing the float and setting the background image, we can set the background image width and height, even we can use the Background-size property to adjust the background image size;
4. Counter: Content:counter (LI)-Before: marker appears, it is useful for setting the list ordinal style, see the following code:

OL {       countercounter-reset:li;   }   Ol>li {       position:relative;       Padding-left:2em;       line-height:30px;       List-style:none;   }   Ol>li:before {       position:absolute;       top:8px;       left:0;       height:16px;       width:16px;       line-height:16px;       Text-align:center;       Content:counter (LI);       Countercounter-increment:li;       border-radius:50%;       Background-color: #ccc;       font-size:12px;       Color: #efefee;   }

PS: We can not set content: "5. Content:attr (Attrname)
Content can take advantage of the attr function to get property values, especially when used in pseudo-classes. See the following code:

<style type= "Text/css" >. list li {list-style:none;       margin-bottom:20px;       }. List Li span {vertical-align:middle;           }. List Li:before {content:attr (data-index);           Display:inline-block;           width:20px;           height:20px;           Text-align:center;           Color: #fff;                   Vertical-align:middle;           Background-color: #f00;       border-radius:50%; } </style> <ul class= "list" > <li data-index= "1" ><span> focus on front-end development and user experience </span></li>       ; <li data-index= "2" ><span> focus on front-end development and user experience </span></li> <li data-index= "3" ><span> Focus on front-end development and user experience </span></li> <li data-index= "4" ><span> focus on front-end development and user experience </span></li> & Lt;li data-index= "5" ><span> focus on front-end development and user experience </span></li> </ul> 

Say the previous words, the following talk about the bug encountered in IE:
Bug Description: The use of pseudo-class implementation of "+"/"-" image switching, by adding and removing the opened class to achieve, but in IE8 the effect is strange, not correctly rendered, other browsers are normal:

. plus {       position:relative;       Display:inline-block;       Vertical-align:top;       width:20px;       height:20px;       margin-right:24px;       border:1px solid #fdaa47;       border-radius:3px;       Overflow:hidden;   }   /* Landscape */.plus:before {       content: ';       Position:absolute;       top:10px;       left:3px;       width:14px;       height:1px;       Background-color: #fdaa47;       Display:block;   }   /* Portrait */.plus:after {       display:block;       Content: ";       width:1px;       height:14px;       Background-color: #fdaa47;       Position:absolute;       left:10px;       top:3px;   }   . Opened:after {       top: -30px;   }

When the minus sign is toggled by AddClass (' opened ') and Removeclass (' opened '): The IE8 browser does not have the desired effect, and some styles cannot be overwritten, now the solution is as follows:

<p class= "Parent" >       <i class= "plus" ></i>   </p>   <script type= "Text/javascript ">   $ ('. Parent ')." On (' click ', Function () {       var $i = $ (this). Find (' i '),           className = $i. attr (' class ');       ClassName =/opened/.test (className)? ' Plus ': ClassName + ' opened ';       $i. ReplaceWith (' <i class= "' + className + '" "></i> ');   });   </script>

Similarities and differences between pseudo-classes and pseudo-elements
1. CSS 2.1 Selectors
There is no distinction between pseudo-classes and pseudo-elements, all using a colon
Like what
Pseudo-Class: First-child,
Pseudo-element: First-line
PS: The written order of several pseudo-classes of a link is explicitly mentioned in this specification:
Note that the a:hover must is placed after the a:link and a:visited rules, since otherwise the cascading rules would hide T He ' color ' property of the a:hover rule. Similarly, because a:active is placed after a:hover, the active color (lime) would apply when the user both activates and H Overs over the A element.

2. CSS Selectors Level 3
The specification distinguishes between pseudo-classes and pseudo-elements, with pseudo-classes using a single colon, and pseudo-elements starting with double colons.
Like what
Pseudo-Class: First-child
Pseudo elements:: First-line,:: First-letter,:: Before,:: After
CSS 3 on the basis of CSS2.1 added a lot of pseudo-class: Target, UI element State Pseudo-class: checked, structural pseudo-class: Nth-child (), and so on, can see the specification.

3. CSS Selectors Level 4 draft
The draft also adds many new pseudo-classes, such as the pseudo-classes related to input control state, value state, value check, Pseudo-class of tree structure, pseudo-class of grid structure, etc.

4. CSS pseudo-elements Module level 4--W3C first public working Draft, January 2015
Some pseudo-elements are added, such as:
Selecting highlighted content:the:: Selection,:: Spelling-error, and:: Grammar-error pseudo-elements,
Placeholder input:the::p laceholder pseudo-element.

5. Common applications
Pseudo-Class:
1) a link style
2) Alternating color
Pseudo elements:
1) The most common use of pseudo elements after clearing floats,
. Fix{*zoom:1;}
. fix:after,.fix::after{display:block; Content: "Clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
2) Letter-spacing+first-letter implement button text hiding
3) First line, first letter style