Content Properties for 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 
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;}
Insert Picture

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

#html 
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.php.cn" > This is the link </a> #cssa: after{    content:attr (href);}
Insert Item Number

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

#html 
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;}
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;}
Numbering nesting

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

#html 
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;}
You can also implement more complex nesting, such as three-level nesting.

#html 
The complete demo is given below

<! DOCTYPE html>
 