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