Using pseudo-elements before and after-written magic effects

We all know that before and after can write a lot of good results, today by chance to see a feel very good, on the way to write a bit, review the pseudo-elements and the difference between pseudo-class, Domo address: http://codepen.io/tianzi77/pen/KpeKXz

Pseudo-classes and pseudo-elements seem simple, and many developers are not paying attention to the difference between pseudo-and pseudo-classes.

Definition of the standard:
CSS introduces the concept of pseudo-classes and pseudo-elements in order to implement formatting based on information outside of the document tree.
Pseudo-classes are:: First-child:link:vistited,:hover,:active,:focus,:lang
Pseudo elements are:: First-line,:first-letter,:before,:after

The difference between pseudo-class and pseudo-element
Let's look at a pseudo-element first-line example. Now there is a piece of HTML, the content is a paragraph:

theofmyismyandismy blood.  over a thoustand blades.  tototo create many weapon.  as I pray, unlimited blade works. </p>  

What would I do if I wanted to describe the first line of the paragraph, without pseudo-elements? Want to think I must nest a layer of span, and then add the class name:

<p><span class  = "First-line"  >i am the  bone of  my  Sword. Steel is  my  body,  and  fire is  my  blood. </span> I have created over  a Thoustand blades. Unknown to  death.nor known to  life.  There are withstood pain to  create many weapon. Yet, those hands would never hold anything. So as  I Pray, unlimited blade works. </p>  

Another example of a pseudo-class first-child is a simple list:
<ul> <li></li> <li></li> </ul>If I want to describe the first element of UL, I don't need to nest new elements, I just need to add a class name to the first existing Li:

<ul><li class="first-child"></li><li></li></ul>  

Although the first and first elements are similar in semantics, the final effect is completely different. So the fundamental difference between pseudo-classes and pseudo-elements is whether they create new elements (abstractions). From the point of view of our imitation, if we need to add a new element to identify, it is pseudo-element, conversely, if you only need to add categories to the existing elements, is pseudo-class. And that's why the standard uses the word "create" precisely to explain pseudo-elements, and uses the term "classify" to explain the cause of the pseudo-class. One describes the newly created "Ghost" element, and the other describes an existing element that matches the "phantom" category.
The pseudo-class is simply used to represent the dynamic state of some elements, typically the various states of a link (LVHA). The CSS2 standard then expands its conceptual scope to make it a "ghost" category that is logically present but not necessarily identified in the document tree.
Pseudo-elements represent the child elements of an element that, while logically present, do not actually exist in the document tree.

Then look at the specific implementation of the demo.

HTML structure is simple

    <a href="/" id="npm-loves-you">        holi,i love you      </a>

CSS style:

        /* Sets the position and text color of a label, relative positioning because the effect of the pseudo-element below is used for absolute positioning */        #npm-loves-you { margin-left: + px ; margin-top: px ; display: inline-block ; color: Rgba (0, 0, 0, 0.4)  ; text-decoration: None ; position: relative ;}         /* Use CSS before and after pseudo elements to add a heart effect and animate */        #npm-loves-you: Before,#npm-loves-you: After { content: "\2665"  ; color: rgba (203,  0)   ; font-size: px ; transition: all 0.3s ; transform: Translate3d (0, 0, 0)  ; position: Absolute ; top: 1px ;}       /* The mouse does not hover up before the content in the before and after is positioned */         #npm-loves-you: Before {  left: -tenpx; }        #npm-loves-you: After {  right: -tenpx; }        #npm-loves-you: Hover {  color: #cb3837; }        /*hover go up and set the content color * /        #npm-loves-you: Hover: Before,#npm-loves-you: Hover: After {  color: #cb3837; }        / * Set position when mouse hover * /        #npm-loves-you: Hover: Before {left  : -px; }        #npm-loves-you: Hover: After {Right  : -px; }

The road of the front, heavy responsibilities!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Using pseudo-elements before and after-written magic effects