Pseudo-Elements in CSS3:: Before and:: After-usage explanation

Before and after is actually attached to the element before and after the pseudo-element, said he is a pseudo-element means that the element is not generated in the DOM, but in the browser rendering engine rendering CSS when the painting, this article mainly introduces about the pseudo-elements in the CSS3:: Before and:: After the use of the need for friends can refer to learning.

Objective

Well-known:: Before and:: After two pseudo-elements are actually the contents of the CSS3, but in fact in the CSS2 already have the figure of both, but CSS2 is preceded by a colon to represent (: Before and: after). Today we'll talk about how these two pseudo-elements are used.

One, as normal elements can be added to the style

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

/*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*/<p class= "del" ><i></i><span> Delete </span></p>

But put an empty I label always feel very uncomfortable, directly 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*/<p class= "del" ><span> Delete </span></p>

Here is the direct use:: Before pseudo-element instead of the empty I tag, the two effects are the same:

Also with this we can use:: After pseudo elements to solve the classic clear floating problem:

. clearfix::after{display:block; clear:both; content: ""; Overflow:hidden; height:0; }
Of course, if your site also needs to be compatible with IE8, it is still used: After bar,:: After incompatible.

Ii. inserting text into an element

Sometimes I may need to add the same text to many elements, so consider using both pseudo-elements. For example:

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

/*html*/<p class= "Up" > Rise </p><p class= "Down" > Descent </p>

The implementation results are as follows:

Iii. inserting an image into an element

Implement a picture plus text effect similar to the one in the first example of this article, or you can insert a picture directly using a pseudo-element instead of using a background map, 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 the image inserted in this way does not change the size of the image by controlling the size of the pseudo-element, but only the fixed-size picture. , so personally think it is better to honestly use the background picture better.

Iv. inserting sequential Item numbers

Maybe you would say that it's not easy to add a serial number? Directly with the ordered list ol no, it's OK!

Yes, it can be achieved, just like this:

<p> my hobby:</p><ol>    <li> eating </li>    <li> sleeping </li>    <li> playing peas </li></ol>

This is the effect of chrome:

Looks good, no problem, if I want to give the previous number bold? The face of a crazy ...

At this point, you say, then I directly in each text before the tag and the number, and then to add the label style is not OK?

/*css*/ul li{List-style:none;} UL Li span{font-weight:bold;}

/*html*/<p> my hobby:</p><ul>    <li><span>1.</span> eating </li>    <li ><span>2.</span> sleep </li>    <li><span>3.</span> play peas </li></ul >

Yes, now is three, if it is 30, 300, how to do? A plus? (Very silly, very naïve ...) ）

In this case, if you use a pure CSS, you also need to use pseudo-elements:

/*css*/ul li{list-style:none; counter-increment:number;}   Number is the equivalent of a variable, just name it, in the pseudo-element called UL li::before{content:counter (number) "."; Font-weight:bold;}  Note that this differs from Js,counter (number) with "." There is no need to add anything, direct connection is good

/*html*/<p> my hobby:</p><ul>    <li> eating </li>    <li> sleeping </li>    <li > Dozen Peas </li></ul>

The effect is as follows:

If I don't want Arabic numerals, I would like to use Chinese numerals?

OK! Pseudo elements are 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:

In addition to this cjk-ideographic, you can also use more List-style-type properties in CSS: (Directly paste the table in W3cshool)