Steps to implement the content property of CSS3

We know that in the CSS3 appeared: Before ",": After "pseudo-class, then today to teach everyone CSS3 content property implementation steps, the following is the case, look at it together.

": Before", ": After" pseudo-class appeared in CSS3,

You can write this:

H1:after{content: ' H1 inserted text after ';

The effects and effects of these two selectors are not introduced here; basically, a CSS property mentioned above is used in conjunction with: After and: Before pseudo elements to display content before or after the object.

Value of content:

Normal: Default value. Behaves the same as the None value

None: No value is generated. <attr>: Insert Tag property value <url>: Inserts an external resource (image, audio, video, or any other resource supported by the browser) using the specified absolute or relative address <string>: Insert String

Counter (name): Using a named counter

Counter (Name,list-style-type): Use a named counter and follow the specified List-style-type property

Counters (name,string): Use all named counters

Counters (Name,string,list-style-type): Use all named counters and follow the specified List-style-type property

No-close-quote: Does not insert the post-tag of the quotes property. But increase its nesting level

No-open-quote: Does not insert the front tag of the quotes property. But reduce its nesting level

Close-quote: Inserting the post tag of the quotes property

Open-quote: Inserting the front tag of the quotes property

The more difficult to understand here is the value: Counter (name) these;

Here is the main summary of this piece, the final will give the value of the demo,

For example, I have the following HTML structure:

<ul><li> This is an ordered list </li><li> this is a list of sequences </li><li> This is an ordered list </li><li> This is an ordered list </li><li> this is an ordered list </li></ul>

I want to add the current Li index value to the back of each li:

UL Li{counter-increment:index;} UL li:after{content: ' Statistics: ' Counter (index);d isplay:block;line-height:35px;}

Explain:

Count (name) here name, must be specified in advance, otherwise all values will be 0;

Count (Name,list-style-type) Here List-style-type is the value of the List-style-type property in CSS;

The complete demo is given below

<! DOCTYPE html>


Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

CSS3 a detailed description of the Translate property

CSS3 a detailed description of the Background-size property

CSS3 realization of rotating halo effect