Use of pseudo elements: before AND: after, before

Use of pseudo elements: before AND: after, before

: Before AND: after are actually the content in CSS3, but they are already in CSS2, only a colon (: before AND: after) is added to CSS2 ). Today we will talk about how to use these two pseudo elements.

1. You can add a style to an element like a common element.

For example, I want to add an icon in front of the text. If I use a common element, I can write it 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> Delete </span> </div>

But it is always uncomfortable to put an empty I tag. 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> Delete </span> </div>

Here, we directly use the: before pseudo element to replace the empty I tag, with the same effect:

Using this, we can use the: after pseudo element to solve the classic floating clearance problem:

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

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

2. Insert text into elements

Sometimes I may need to add the same text to many elements at the same time, 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"> increase </p> <p class = "down"> decrease </p>

The implementation result is as follows:

3. Insert images into elements

Similar to the image and text effects in the first example in this article, you can also use a pseudo element to directly insert an image without the need to use a background image, just 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, you must note that the size of the inserted image cannot be changed by controlling the size of the pseudo element, only images of a fixed size can be introduced (this is a bit pitfall ...), therefore, I personally think it is better to use honest and practical background images.

Iv. Insert continuous project numbers

Maybe you will say that it is not easy to add continuous project numbers? Simply use the ordered list ol!

Yes, it can be implemented, just like this:

<P> my hobbies: </p> <ol> <li> eating </li> <li> sleeping </li> <li> doubebean </li> </ol>

This is the effect of Chrome:

It looks pretty good. No problem. What if I want to rough the serial number above? I was overwhelmed...

At this time, you said, then I directly add labels and numbers in front of each text, and then add a style to the label. Isn't that enough?

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

/* HTML */<p> my hobbies: </p> <ul> <li> <span> 1. </span> dinner </li> <span> 2. </span> sleep </li> <span> 3. </span> beans </li> </ul>

Right. Now there are three items. If there are thirty or three hundred, what should I do? Add one by one? (Silly, naive ...)

At this time, if the pure CSS method is used, pseudo elements must be used:

/* CSS */ul li {list-style: none; counter-increment: number;} // number is equivalent to a variable. Just name it, call ul li: before {content: counter (number) "in the pseudo element )". "; font-weight: bold;} // note that this is different from JS, counter (number) and ". "There is no need to add anything between them. Just connect directly.

/* HTML */<p> my hobbies: </p> <ul> <li> eating </li> <li> sleeping </li> <li> doubebean </li> </ul>

The effect is as follows:

If I don't want Arabic numbers, can I use Chinese numbers?

Yes! The pseudo element is very good 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:

Besides thiscjk-ideographicYou can also use the list-style-type attribute in more CSS: (directly paste the table in w3cshool)

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!