Pseudo elements:: Before with:: After use

This time, we bring pseudo-elements:: Before and:: After use in detail, using pseudo-elements:: Before and:: After the notice of what, the following is the actual case, take a look.

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)

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 makes a striped big background

CSS3 mouse move into the picture dynamic prompt effect

How sticker-footer layouts are used in CSS