码农教程 - 一技在手,衣食无忧! tools

目录

CSS counter-set Property

❮ Previous Complete CSS Reference Next ❯

Example

Create a counter ("my-counter"), set it to 5, and increase it by one for each occurrence of the <h2> selector:

body {
  /* Set "my-counter" to 5 */
  counter-set: my-counter 5;
}

h2::before {
  /* Increment "my-counter" by 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The counter-set property creates and sets a CSS counter to a specific value.

The counter-set property is usually used together with the counter-increment property and the content property.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.counterSet="4" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
counter-set 85.0 85.0 68.0 Not supported 71.0

CSS Syntax

counter-set: none| counter-name number|initial|inherit;

Property Values

Value Description
none Default value. No counter set is to be performed
counter-name number The name of the counter to set and the value to set the counter to on each occurrence of the selector. The default number value is 0
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Create a counter ("my-counter"), set it to 5, and decrease it by one for each occurrence of the <h2> selector:

body {
  /* Set "my-counter" to 5 */
  counter-set: my-counter 5;
}

h2::before {
  /* Decrement "my-counter" by 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
} 
Try it Yourself »

Example

Numbering sections and sub-sections with "Section 10:", "10.1", "10.2", etc.:

body {
   /* Set "section" to 9 */
  counter-set: section 9;
}

h1 {
   /* Set "subsection" to 0 */
  counter-set: subsection 0;
}

h1::before {
  /* Increment "section" by 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

h2::before {
  /* Increment "subsection" by 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
} 
Try it Yourself »

Example

Create a counter, set it to 9, and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:

body {
  /* Set "my-counter" to 9 */
  counter-set: my-counter 9;
}

h2::before {
  /* Increment "my-counter" by 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}
Try it Yourself »

Related Pages

CSS reference: ::before pseudo element

CSS reference: ::after pseudo element

CSS reference: content property

CSS reference: counter-increment property

CSS functions: counter() function


❮ Previous Complete CSS Reference Next ❯