CSS counter counter and content summary

Source: Internet
Author: User

The Content property was introduced as early as css2.1, and can be used: before and: After pseudo-element generation. The content property is now supported by most browsers, and the support for the content attribute can be found on the Caniuse.com website for the current support situation:

The most common content property is the mate: before or: After to generate the contents, the default claimed element is the inline element:

div.test:before{    content: "I before Div";  }div.test:after{     content: "I am behind the div";}

The above code is used to add content to the contents of the div content in the class named Test, and other styles can be set after content, where the content is equivalent to the activation flag of the pseudo element.

The value of the content property, in addition to using literal values, can also be used by the attr () method to use the property values of other tags:

a.test:after{    content:attr (HREF);} <  class= "Test"  href= "http://www.taobao.com/"></  a>

CSS counters appear earlier, but are only recently started to understand. Because CSS counters are only useful when used with the Content property , the content property is often used with: before and: After pseudo-elements, so it is an inseparable relationship between the counter, pseudo-element, and content. The CSS counter consists of two properties and a method, respectively:

1. Counter-reset

This property defines the name of the counter, which can define multiple counters at the same time, which represents the initial value when the number is defined, and defaults to 0 by default:

div.count{    counter-reset:count1 Count2;}

As the code above defines two counters count1 and Count2, the initial default is 0.

2. Counter-increment

This property receives two parameters, the first parameter represents the name of the counter, the second represents the value incremented each time, and defaults to 1 by default.

div.count:before{    counter-increment:count1 2;}

This line of code defines the counter count1 one-time self-increment for, at this time the default initial value of the counter is 0+2=2; if the number 2 defaults, the default self-increment is 1, at which time the counter initial value is 0+1=1.

3. Counter ()/counters ()

This method for the counter call method, receive two parameters, the first parameter is the counter name, the second is a numeric type, down to this case a small exercise:

<!DOCTYPE HTML><HTML>    <Head>         <MetaCharSet= "Utf-8">         <title>Counter&content</title>         <style>Div.conter{Margin-left:50px;Couter-reset:Count; /*Define counter Count*/                }. Conter P{Height:40px;Border:1px solid #ffe000;                }. Conter P:before{content:counter (count,decimal) "."/*Call the counter and add it after the number.*/Counter-increment:count;                }         </style>    </Head>    <Body>         <Divclass= "Conter">               <P>Paragraph 1</P>               <P>Paragraph 2</P>               <P>Paragraph 3</P>               <P>Paragraph 4</P>               <P>Paragraph 5</P>         </Div>    </Body></HTML>

The final result is as follows:

CSS counter counter and content summary

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.