Detailed description of content attributes in CSS3

Detailed description of content attributes in CSS3

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:

This is h1 This is h2

Css

H1: after {content: h1 insert content} h2: after {content: none}

 

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:;/* add double quotation marks to escape */} 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:

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:

This is the link

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:

Title

Text

Title

Text

Title

Text

Title

Text

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:

Title

Text 1

Text 2

Text 3

Title

Text 1

Text 2

Text 3

Title

Text 1

Text 2

Text 3

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:

Title Medium title Subtitles Subtitles Medium title Subtitles Subtitles Title Medium title Subtitles Subtitles Medium title Subtitles Subtitles

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;}