Detailed description of content attributes of CSS3 and detailed description of css3content

Detailed description of content attributes of CSS3 and detailed description of css3content

There are four main pseudo elements in CSS: before/after/first-letter/first-line. In the before/after pseudo element selector, there is a content attribute, insert content on the page.

Insert plain text

Content: "inserted article", or content: none does not insert content
Html:

<H1> This is h1 

Css

H1: after {content: "content inserted after h1"} h2: after {content: none}

Running results: https://jsfiddle.net/dwqs/Lmm1r08x/

Embedded text symbols

You can use the open-quote attribute value of the content attribute and the close-quote attribute value to add nested text symbols such as parentheses, single quotes, and double quotation marks on both sides of the string. Open-quote is used to add the start text symbol, and close-quote is used to add the end text symbol. Modify the preceding 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: "\" "\" ";/* double quotation marks must be escaped */} h2: before {content: open-quote;} h2: after {content: close-quote ;}

Running results: https://jsfiddle.net/dwqs/p8e3qvv4/

Insert Image

The content attribute can also be directly inserted before/after the element.
Html:

<H3> This is h3 

Css:

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

Running results: https://jsfiddle.net/dwqs/c6qk6pkv/

Attribute Value of the inserted element

The content attribute can be directly obtained by using attr and inserted to the corresponding position.
Html:

<A href = "http: // www.ido321.com"> This is the link & nbsp; </a>

Css:

a:after{    content:attr(href);}

Running results: https://jsfiddle.net/dwqs/m220nzan/

Insert project number

Append consecutive numbers to multiple projects using the counter attribute of content.
Html:

<H1> title 

Css:

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

Running results: https://jsfiddle.net/dwqs/2ueLg3uj/

Project Number Modification

By default, the inserted project number is numeric, 1, 2, 3 .... Automatically incrementing, you can also append text and style to the project number. The above html is still used, and css is modified as follows:

H1: before {content: 'unit 'counter (my) '; color: red; font-size: 42px;} h1 {counter-increment: my ;}

Running results: https://jsfiddle.net/dwqs/17hqznca/

ID type

You can use the syntax in the content (counter name, number type) format to specify the number type. For details about the number type, refer to ul's list-style-type attribute value. With the preceding html, css is modified as follows:

h1:before{    content:counter(my,upper-alpha);    color:red;    font-size:42px;}h1{    counter-increment:my;}

Running results: https://jsfiddle.net/dwqs/4nsrtxup/

Number nesting

Numbers are nested in the large numbers, and small numbers are nested in the numbers.
Html:

<H1> title 

Css:

h1::before{    content:counter(h)'.';}h1{    counter-increment:h;}p::before{    content:counter(p)'.';    margin-left:40px;}p{    counter-increment:p;}

Running results: https://jsfiddle.net/dwqs/2k5qbz51/
In the sample output, we can find that the numbers of p are continuous. If the three p numbers after each h1 are re-numbered, you can use the counter-reset attribute to reset and modify the css of the above h1:

h1{    counter-increment:h;    counter-reset:p;}

In this way, the number is reset, look at the result: https://jsfiddle.net/dwqs/hfutu4Lq/
You can also implement more complex nesting, such as layer-3 nesting.
Html:

<H1> title 

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:40px;}h3::before{    content:counter(h1) '-' counter(h2) '-' counter(h3);}h3{    counter-increment:h3;    margin-left:80px;}

Running results: https://jsfiddle.net/dwqs/wuuckquy/

Zhang Da has an article that uses counter to implement counting: Small tip: CSS counters + pseudo classes to achieve dynamic numerical calculation and presentation.

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