A detailed description of CSS3 's content properties

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:

<h1>这是h1</h1><h2>这是h2</h2>

As1

h1::after{    content:"h1后插入内容"}h2::after{    content:none}

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:

<h3>这是h3</h3>

Css:

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

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">这是链接&nbsp;&nbsp;</a>

Css:

a: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:

<H1>Big Headlines</H1><p>Text</P><H1>Big Headlines</H1><p>Text</P><H1>Big Headlines</H1><p>Text</P><H1>Big Headlines</H1><p>Text</P>

Css:

h1:before{    content:counter(my)‘.‘;}h1{    counter-increment:my;}

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)‘章‘;    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:

<H1>Big Headlines</H1><p>Text 1</P><p>Text 2</P><p>Text 3</P><H1>Big Headlines</H1><p>Text 1</P><p>Text 2</P><p>Text 3</P><H1>Big Headlines</H1><p>Text 1</P><p>Text 2</P><p>Text 3</P>

Css:

H1:: Before{  content:counter (h)'. '; }H1{  counter-increment:h;} P:: Before{  content:counter (p)'. ';  margin-left: +px; }P{  counter-increment:p;} 

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:

<H1>Big Headlines</H1><h2>Title in</H2><h3>Small title</h3><h3>Small title</h3><h2>Title in</H2><h3>Small title</h3><h3>Small title</h3><H1>Big Headlines</H1><h2>Title in</H2><h3>Small title</h3><h3>Small title</h3><h2>Title in</H2><h3>Small title</h3><h3>Small title</h3>

Css:

H1:: Before{  content:Counter (H1)'. '; }H1{  counter-increment:H1;  counter-reset:h2; }H2:: Before{  content:Counter (H1) '-' counter (H2);} H2{  counter-increment:h2;     counter-reset:h3;  margin-left: +px; }H3:: Before{  content:Counter (H1) '-' counter (H2) '-' counter (h3); }H3{  counter-increment:h3;  margin-left:px; }

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

Original: http://www.ido321.com/1555.html

A detailed description of CSS3 's content properties