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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.