Pseudo-class before and after

Sometimes, we need a lot of repetitive code to implement a very simple function, which is not only a waste of time, but also inefficient, for example:

<div class= "AA" > Hello </div>
<div class= "AA" > My good </div>
<div class= "AA" > Everyone good </div>
<div class= "AA" > Front and rear </div>

<div class= "AA" > Hello </div>
<div class= "AA" > My good </div>
<div class= "AA" > Everyone good </div>
<div class= "AA" > Front and rear </div>

<div class= "AA" > Hello </div>
<div class= "AA" > My good </div>
<div class= "AA" > Everyone good </div>
<div class= "AA" > Front and rear </div>

<div class= "AA" > Hello </div>
<div class= "AA" > My good </div>
<div class= "AA" > Everyone good </div>
<div class= "AA" > Front and rear </div>

If we need to add a dynamic parenthesis slider to the CSS3 animation for each Div, then you can imagine adding two div to the front and back of each div. Such a laborious errand every lazy program ape will not do, so, here we can use pseudo-class easy to solve.

In CSS, add two pseudo-classes for AA--

. aa::before{
Display:inline-block;
Content: ' [';
Transform:translatex (30px);
opacity:0.1;

}
. aa::after{
Display:inline-block;
Content: '] ';
Transform:translatex ( -30px);
opacity:0.1;

}

Just this is enough, you can see each AA div before and after the parentheses (adjust opacity can see more clearly).

If you need a dynamic effect, you only need--

. aa::before,.aa::after{
Transition-property:transform opacity;
transition-duration:0.8s;
Transition-timing-function:linear;
}

. aa:hover::before,:hover::after{
Transform:rotatex (0);
Opacity:1;
}

It can be easily and happily settled.

It is more important to note that when using Transfrom:rotatex, they may not be valid if they are not inline elements.

Also, if the content attribute is not written, there is nothing to come out of.

Pseudo-class before and after