CSS3 How to use selectors to insert the desired content in a page (with code)

This article brings you the content is about CSS3 how to use the selector in the page to insert the required content, there is a certain reference value, the need for friends can refer to, I hope to help you.

1 using selectors to insert content

Using the after or before selector, define what you want to insert in the content property of the selector, and when the content is inserted into text, you must add either single or double quotation marks along the sides of the inserted text.

<style type= "text/css" >h2:before{  content: ' COLUMN ';}</style>

2 Specifies that individual elements are not inserted

Use the Content property's None property value

<style type= "Text/css" >h2.sample:before{  content:none;}</style>

3 Inserting an image file

<style type= "Text/css" >h2:before{  content:url (mark.png);}</style>

4 Displays the value of the ALT attribute as the caption of the image

In the Content property, you can display the property values of a property by specifying the form attr (property name).

Img:after{content:attr (ALT);d Isplay:block;text-align:center;}

5 using the Content property to insert a project number

(1) Add consecutive numbers before multiple headings

1. Use the Counter property value in the Content property to append consecutive numbering for multiple items

< element >:before{Content:counter (counter name);} (use counter to calculate number, counter can be named arbitrarily)

2. You also need to append the counter-increment attribute of the element to the element's style, in order to use sequential numbering, You need to set the property value value of the Counter-increment property to the counter name specified in the Counter property value of the before selector or after selector.

< element >{The counter name specified in the Counter-increment:before selector or after selector}

H1:before{content:counter (mycounter);}h1{counter-increment:mycounter;}//1, 2, 3 .....

(2) Append text to the project number

H1:before{content: ' Counter (mycounter) ',}//1th, title, title of the 2nd chapter, ...

(3) Specify the type of the number

1. Use the before selector or the content property of the after selector to not only append a numeric number, but also to append an alphabetic number or Roman numeral number.

Content:counter (counter name, number type)

2. You can use the value of the List-style-type property to specify the kind of number, such as the capital letter number, using the "Upper-alpha" attribute, and the "Upper-roman" attribute when you specify uppercase Roman letters.

H1:before{content:counter (Mycounter,upper-alpha) '. ' ;}//A., B., C.,

(4) Number nesting

H1:before{content:counter (MyCounter),}//1 (1, 2, 3 ...), 2 (1, 2, 3 ...) 、........ H1{counter-increment:mycounter ; counter-reset:subcounter;} (reset the number in) H2:before{content:counter (subcounter);}h2{counter-increment:subcounter ; margin-left:40px}

(5) Large number embedded in the number

H2:before{content:counter (mycounter) '-' counter (subcounter) '. ' ;}//1-1, 1-2

(6) Adding nested text symbols on both sides of the string

1. You can use the Open-quote property value of the Content property with the Close-quote property value to add nested text symbols, such as parentheses, single quotation marks, and double quotation marks, to both sides of the string.

2. The Open-quote property value is used to add the starting nested text symbol, and the Close-quote property value is used to add the end of the nested text symbol.

3. Use the Quotes property in the style of the element to specify what nested text symbols to use

h1:before{  Content:open-quote;} H1:after {content:close-quote;} h1{   Quotes: "(" ")"   }//shape:   (title)