Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
