CSS content generation (Important content: CSS counters)

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)