The magic effect written by the pseudo elements before and after, and the pseudo element beforeafter

The magic effect written by the pseudo elements before and after, and the pseudo element beforeafter

Everyone knows that before and after can write a lot of good results. Today, I accidentally saw a good one. I wrote it by the way and reviewed the differences between pseudo elements and pseudo classes, domo address: http://codepen.io/tianzi77/pen/KpeKXz

Pseudo-classes and pseudo-elements seem simple, and many developers are not paying attention to them. Let's take a look at the differences between pseudo-elements and pseudo-classes.

Standard definition:
CSS introduces the concept of pseudo classes and pseudo elements to format information beyond the document tree.
Pseudo classes include: first-child: link: vistited,: hover,: active,: focus,: lang
Pseudo elements include: first-line,: first-letter,: before,: after

Differences between pseudo classes and pseudo elements
First, let's look at a pseudo-element first-line example. Now there is an HTML section with the content as a paragraph:

<p>I am the bone of my sword. Steel is my body, and fire is my blood.  I have created over a thoustand blades.  Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.  Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>  

What can I do if I want to describe the first line of this paragraph without pseudo elements? To do this, you must embed a layer of span and 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. Have withstood pain to create many weapon.  Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>  

Another example of a pseudo class first-child has 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 line and the first element have similar semantics, the final effect is completely different. Therefore, the fundamental difference between pseudo-classes and pseudo-elements is whether they create new elements (abstraction ). From the perspective of imitating its meaning, if a new element needs to be added for identification, it is a pseudo element. Otherwise, if you only need to add a category to an existing element, it is a pseudo class. This is why the standard uses the word "create" accurately to explain pseudo elements, and the word "classify" to explain the reasons for pseudo classes. One describes the newly created "ghost" element, and the other describes the existing elements that conform to the "ghost" category.
At the beginning, a pseudo-class is used to represent the dynamic state of some elements. A typical concept is the state of each link (LVHA ). Subsequently, the CSS2 standard extended its conceptual scope to make it a "ghost" category that is logically present but does not need to be identified in the document tree.
A pseudo element represents a child element of an element. Although this child element exists logically, it does not actually exist in the document tree.

Let's take a look at the specific implementation in the demo.

The html structure is simple.

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

Css style:

/* Set the position and text color of tag a. The relative positioning is caused by the absolute positioning of the pseudo elements below */# npm-loves-you {margin-left: 100px; margin-top: 80px; display: inline-block; color: rgba (0, 0, 0, 0.4); text-decoration: none; position: relative ;} /* use the css before and after pseudo elements to add the heart-shaped effect and set the animation */# npm-loves-you: before, # npm-loves-you: after {content: "\ 2665"; color: rgba (203, 56, 55, 0); font-size: 14px; transition: all 0.3 s; transform: translate3d (0, 0, 0); position: absolute; top: 1px;}/* locate the content in before and after before the mouse goes up without hover */# npm-loves-you: before {left: -10px ;}# npm-loves-you: after {right:-10px ;}# npm-loves-you: hover {color: # cb3837 ;} /* set the content color after hover goes up */# npm-loves-you: hover: before, # npm-loves-you: hover: after {color: # cb3837 ;} /* set the location when the mouse hover */# npm-loves-you: hover: before {left:-15px ;}# npm-loves-you: hover: after {right: -15px ;}

The road to front-end is a long way to go!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.