An explanation of the properties of content in CSS3

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 
Running Result: https://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:

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;}
Running Result: https://jsfiddle.net/dwqs/p8e3qvv4/

Insert Picture

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

#html 
Running Result: https://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 <a href= "http:///www.ido321.com" > This is the link </a> #cssa: after{    content:attr (href);}
Running Result: https://jsfiddle.net/dwqs/m220nzan/

Insert Item Number

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

#html 
Running 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:

h1:before{    content: ' Counter ' (My) ' chapter ';    color:red;    font-size:42px;} h1{    Counter-increment:my;}
Running Result: https://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:

h1:before{    Content:counter (my,upper-alpha);    color:red;    font-size:42px;} h1{    Counter-increment:my;}
Running Result: https://jsfiddle.net/dwqs/4nsrtxup/

Numbering nesting

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

#html 
Running Result: https://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:

h1{    counter-increment:h;    Counter-reset:p;}
This way, the number is reset to see the result: https://jsfiddle.net/dwqs/hfutu4Lq/

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

#html 
Running Result: https://jsfiddle.net/dwqs/wuuckquy/

Zhang has an article that uses counter to count: small tip:css counter + pseudo-class implementation of numerical dynamic computation and rendering