About the content attribute instance in CSS3

This article mainly introduces the use of the content attribute in the CSS3 example, is the basic knowledge for CSS3 to get started learning, the need for friends can refer to the following

The main pseudo elements in CSS are four: Before/after/first-letter/first-line, in the before/after pseudo-element selector, there is a content property that enables the insertion of the contents of the page.
Insert Plain Text

Content: "Inserted article", or Content:none not inserted
Html:

xml/html Code copy content to clipboard

1. < H1 > This is H1</H1>

2. < H2 > This is H2</h2>

Css

CSS Code copy content to clipboard

h1::after{       content: "H1 inserted after"}   h2::after{       Content:none}

Operation Result:
jsfiddle.net/dwqs/lmm1r08x/
Embed text symbols

You can use the Open-quote property value of the Content property and the Close-quote property value to add nested text symbols, such as parentheses, single quotation marks, and double quotation marks, around the string. Open-quote is used to add a beginning text symbol, Close-quote to add the end of the text symbol. Modify the above CSS:

CSS Code copy content to clipboard

h1{       Quotes: "(" ")";  /* Use the quotes attribute of the element to specify the text symbol */}   h1::before{       content:open-quote;   }   h1::after{       content:close-quote;   }   h2{       Quotes: "\" "" \ "";  /* Add double quotes to escape */}   h2::before{       content:open-quote;   }   h2::after{       content:close-quote;   }

Operation Result:
jsfiddle.net/dwqs/p8e3qvv4/
Insert Picture

The Content property can also insert a picture directly before/after the element
Html:

xml/html Code copy content to clipboard

1. < H3 > This is H3</h3>

Css:

h3::after{    Content:url (http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)}

Operation Result:
jsfiddle.net/dwqs/c6qk6pkv/
Insert an element's property value

The content property can be used to get the attributes of an element directly from attr and insert it into the corresponding location.
Html:

xml/html Code copy content to clipboard

1. < a href="http:///www.ido321.com"> This is the link </a>

Css:

CSS Code copy content to clipboard

a:after{       content:attr (HREF);   }

Operation Result:
jsfiddle.net/dwqs/m220nzan/
Insert Item Number

Use the Counter property of the content to append sequential numbering for multiple items.
Html:

xml/html Code copy content to clipboard

2. < H1 > Big title </H1>

4. < P > text </p>

6. < H1 > Big title </H1>

8. < P > text </p>

10. < H1 > Big title </H1>

12. < P > text </p>

14. < H1 > Big title </H1>

16. < P > text </p>

Css:

CSS Code copy content to clipboard

h1:before{       Content:counter (My) '. ';   }   h1{       countercounter-increment:my;   }

Operation Result:
https://jsfiddle.net/dwqs/2ueLg3uj/
Item number Decoration

The item number that is inserted by default is numeric, .... Automatically increment, also can give item number append text and style, still use above html,css modify as follows:

CSS Code copy content to clipboard

h1:before{       content: ' Counter ' (My) ' chapter ';       color:red;       font-size:42px;   }   h1{       countercounter-increment:my;   }

Operation Result:
jsfiddle.net/dwqs/17hqznca/
Specify a number type

Use the syntax of the content (counter name, number type) format to specify the number type, the reference of the number type can be based on the UL List-style-type attribute value. Use the above html,css to modify the following:

CSS Code copy content to clipboard

h1:before{       Content:counter (my,upper-alpha);       color:red;       font-size:42px;   }   h1{       countercounter-increment:my;   }

Operation Result:
jsfiddle.net/dwqs/4nsrtxup/
Numbering nesting

The number is nested in a large number, and a small number is nested in the number.
Html:

xml/html Code copy content to clipboard

2. < H1 > Big title </H1>

4. < P > Text 1</p>

6. < P > Text 2</p>

8. < P > Text 3</p>

10. < H1 > Big title </H1>

12. < P > Text 1</p>

14. < P > Text 2</p>

16. < P > Text 3</p>

18. < H1 > Big title </H1>

20. < P > Text 1</p>

22. < P > Text 2</p>

24. < P > Text 3</p>

Css:

CSS Code copy content to clipboard

h1::before{       content:counter (h) '. ';   }   h1{       countercounter-increment:h;   }   p::before{       Content:counter (P) '. ';       margin-left:40px;   }   p{       countercounter-increment:p;   }

Operation Result:
jsfiddle.net/dwqs/2k5qbz51/

In the output of the example, you can see that the number of P is continuous. If you renumber three p after each h1, you can use the Counter-reset property reset to modify the above H1 CSS:

CSS Code copy content to clipboard

h1{       countercounter-increment:h;       countercounter-reset:p;   }

In this way, the number is reset to see the result:
jsfiddle.net/dwqs/hfutu4lq/

You can also implement more complex nesting, such as three-level nesting.
Html:

xml/html Code copy content to clipboard

2. < H1 > Big title </H1>

4. < H2 > title </h2>

6. < H3 > Small title </h3>

8. < H3 > Small title </h3>

10. < H2 > title </h2>

12. < H3 > Small title </h3>

14. < H3 > Small title </h3>

16. < H1 > Big title </H1>

18. < H2 > title </h2>

20. < H3 > Small title </h3>

22. < H3 > Small title </h3>

24. < H2 > title </h2>

26. < H3 > Small title </h3>

28. < H3 > Small title </h3>

Css:

CSS Code copy content to clipboard

h1::before{       Content:counter (H1) '. ';   }   h1{       countercounter-increment:h1;       COUNTERCOUNTER-RESET:H2;   }   h2::before{       Content:counter (H1) '-' counter (H2);   }   h2{       countercounter-increment:h2;       Countercounter-reset:h3;       margin-left:40px;   }   h3::before{       Content:counter (H1) '-' counter (H2) '-' counter (H3);   }   h3{       Countercounter-increment:h3;       margin-left:80px;   }

Operation Result:
jsfiddle.net/dwqs/wuuckquy/