CSS content generation (Important content: CSS counters)

Source: Internet
Author: User

CSS Content Properties

The Content property is used in conjunction with : Before and : after pseudo-elements to insert a build.

This property is used to define the generated content that is placed before or after the element. By default, this is often the inline content, but the type of box that the content creates can be controlled with the property display .

Attention:

Works only under modern browsers that are available in CSS.

It is not used by the DOM , it is purely superficial.

the value of the content property:

1. text values, such as:content:"This is the added text"

2. attribute values, such as:content:"attr (ID)"// This sentence will get the value of the ID attribute of the element and add as content

Application 1: counter

(counter-reset and counter-increment)

the Counter-reset property sets the value of a counter that has a selector occurrence. The default is 0.

with this property, the counter can be set or reset to any value, either positive or negative. If number is not provided , the default is 0.

the Counter-increment property sets the counter increment for each occurrence of a picker. The default increment is 1.

with this property, the counter can increment (or decrement) a value, which can be positive or negative. If the number value is not provided , the default is 1.

App 2: Insert the correct quotation marks for multilingual content

Using the <q> tag, the default outer layer is ", Inner is '

The Quotes Property sets the quotation mark type of a nested reference (embedded quotation).

App 3: Picture replacement text

Cons: You can't repeat or tile a picture, or use an image sprite

App 4: Display the corresponding link icon

Refers to the icon for the link type that appears after the link for a different link type.

For example, if the linked object is a picture, the small icon for the picture is displayed, and if the linked object is a video, a small video icon is displayed, and if the link is a URL page link, the small icon for the link is displayed

Focus:

CSS Counters

1.counter-reset: Resets the counter.

Counter-reset can reset multiple counters at the same time. counter-reset:ctr 1 subctr 2;// Reset Ctr and subctr Two counters at the same time

2.counter-increment

3.counter (): is a function that is used primarily in conjunction with content . Use counter () to invoke a well-defined counter identifier.

Counter (name, style)

The second parameter, style: Can be set without a.

Take the same value as list-style-type

Counters (name, string, style)

Second argument string: The character that can be set, concatenate ordinal

Instance Address: http://benlai.sinaapp.com/code/css_content.html

Reference article: http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/

Http://www.w3cplus.com/css3/css-counters.html

CSS content generation (Important content: CSS counters)

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.