The CSS pseudo-class selector "Before" is used today to understand how it is used and how it is used.

I don't know if there are any small partners, like me, when I want to add a small icon or something inside an element,

Add your own <span> tags directly to the HTML document, or something else. or append an element to the element with JavaScript.

For example, we add the b element to the following Div ;

<div></div>

<div></div>

<div></div>

<div></div>

$ (function) {

　　

$("div").append("<b>Hello</b>");

}

results:<div> <b>Hello</b> </div>

<div> <b>Hello</b> </div>

<div> <b>Hello</b> </div>

<div> <b>Hello</b> </div>

and CSS pseudo-class:before;

Div:before{content: ""; width:5px;height:5px;left:169px;top:2px;}

Note: Content: is an attribute with a value of information. (Can be a symbol, text);

Instance:

Html:

<div class= "left" >
<ul>
<li><a href= "#" > Brand profile </a></li>
<li><a href= "#" > Brand structure </a></li>
<li><a href= "#" > Brand definition </a></li>
<li><a href= "#" > Brand culture </a></li>
<li><a href= "#" > News </a></li>
<li><a href= "#" > Contact </a></li>
<li><a href= "#" > Memorabilia </a></li>
</ul>
</div>

Css:

. left{width:175px;}
. Left ul{padding-top:20px;border-right:1px dashed #333;}
. Left UL li>a{position:relative;display:block;width:175px;text-align:center;font-size:16px;line-height:45px;}
. Left ul li>a:hover:before{position:absolute;content: ""; width:5px;height:5px;left:169px;top:2px;}
. Left UL li>a:hover{color:red;}

Results:

after appearing small dots, and like text, set the color directly!

The CSS pseudo-class selector "Before" is used today to understand how it is used and how it is used.