Usage tutorial of pseudo elements::before and ::after

The two pseudo elements::before and ::after are actually content in CSS3. However, they are already present in CSS2, but in CSS2 they are represented by a colon in front (: before and :after). Today I will mainly talk about how to use these two pseudo elements.

1. You can add styles to ordinary elements just like ordinary elements.

For example, if I want to add an icon in front of text, if I write it with ordinary elements, I can write like this:

/*CSS*/.del{ font-size: 20px;}.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}

/*HTML*/
<div class="del"><i></i><span>删除</span></div>

But it always feels uncomfortable to put an empty i tag, so just remove it!

/*CSS*/.del{ font-size: 20px;}.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}

/*HTML*/
<div class="del"><span>删除</span></div>

Here we directly use the ::before pseudo-element to replace the empty i tag. The two have the same effect:

Similarly, we can use this Use the ::after pseudo-element to solve the classic problem of clearing floats:

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

Of course, if your website still needs to be compatible with IE8, then use :after, ::after is not compatible.

2. Insert text into elements

Sometimes I may need to add the same text to many elements at the same time, so you can consider using these two pseudo-elements. For example:

/*CSS*/.up:after{ content: '↑'; color: #f00;}.down:after{ content: '↓'; color: #0f0;}

/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>

The effect is as follows:

3. Insert the image into the element

Achieve something similar to the first example in this article To add text effects to pictures, you can also use pseudo elements to directly insert pictures without using a background image, like this:

/*CSS*/.del{ font-size: 20px;}.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }.del span{ vertical-align: middle;}

However, it is important to note that pictures inserted in this way cannot be controlled by pseudo elements. To change the size of the image based on the size of the element, you can only introduce a fixed-size image (this is a bit confusing...), so I personally think it is better to use a practical background image.

4. Insert consecutive project numbers

Maybe you will say, isn’t it easy to add consecutive project numbers? Just use the ordered list directly!

Yes, it can indeed be achieved, just like this:

<p>我的爱好：</p><ol><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ol>

This is the effect under Chrome:

Look It looks fine, no problem. What if I want to bold the serial number in front? I'm confused...

Now you say, can't I just manually add labels and numbers before each text, and then add styles to the labels?

/*CSS*/ul li{ list-style: none;}ul li span{ font-weight: bold;}

/*HTML*/<p>我的爱好：</p><ul><li><span>1.</span>吃饭</li><li><span>2.</span>睡觉</li><li><span>3.</span>打豆豆</li></ul>

Yes, there are three items now. What if there are thirty items or three hundred items? Add them one by one? (Very silly and naive...)

If you use pure CSS at this time, you have to use pseudo elements:

/*CSS*/ul li{ list-style: none; counter-increment: number;}   //number相当于是个变量，随便取名就好，在伪元素中调用ul li::before{ content: counter(number)"."; font-weight: bold;}  //注意这里不同于JS，counter(number)与"."之间不需要加任何东西，直接连接就好

/*HTML*/<p>我的爱好：</p><ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>

The effect is as follows:

So if I don’t want Arabic numerals, can I just use Chinese numerals?

Can! Pseudo elements are nice and powerful!

ul li{ list-style: none; counter-increment: number;}  
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

The effect is as follows:

In addition to thiscjk-ideographic, you can also use more list-style-type in CSS Attributes: (Paste directly to the table in w3cshool)

The above is the detailed content of Usage tutorial of pseudo elements::before and ::after. For more information, please follow other related articles on the PHP Chinese website!