A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/css/properties/counter-increment below:

counter-increment · WebPlatform Docs

counter-increment Summary

The counter-increment property accepts one or more names of counters (identifiers), each one optionally followed by an integer which specifies the value by which the counter should be incremented (e.g. if the value is 2, the counter increases by 2 each time it is invoked).

Overview table
Initial value
none
Applies to
All elements
Inherited
No
Media
visual

Computed value
:

Animatable
No

CSS Object Model Property
:

Syntax Values
identifier
The name of the counter. The counter can then be invoked by using counter(<identifier>).
integer
An integer that indicates by how much the counter is

incremented for every occurrence of the element. Zero and negative integers are allowed. If no value is specified, the value defaults to 1.

Examples

This example uses counter-increment and the content properties to prepend headers with an outline-esque, identifier, similar to an ordered list. (Note that the numbering does not reset between the two headers: this can be handled with counter-reset.)



h1 {
    counter-increment: header;
}

h1:before {
    content: counter(header) ". ";
}

h2 {
    counter-increment: subheader;
}

h2:before {
    content: counter(header) "." counter(subheader) ". ";
}

View live example

This example shows how to specify an integer in the counter-increment property and allow the CSS to increment the counter by values besides 1.




h1 {
    counter-increment: header 3;
}


h1:after {
    content: counter(header) ". ";
}

View live example

Usage 
 It is important to note that counter-increment can handle multiple counters and non-positive integers, though best practices often dictates that counters should be defined separately.
Notes Remarks

The counter-increment attribute can contain a list of one or more counters, each one optionally followed by an integer. The integer represents the amount that the counter is incremented after each occurrence of an element. This property is used to generate numbered content for each occurrence of an element. The counter need not be defined before it is incremented. To reset a counter value, use the counter-reset attribute. An element that is not displayed (display attribute set to ‘none’) and pseudo-elements that do not generate content (content attribute set to ‘normal’) cannot increment or reset a counter. This property requires Windows Internet Explorer to be in IE8 Standards mode rendering.

Syntax

counter-increment: '[ <identifier> <integer> ]'+

Standards information See also Related articles Generated and Replaced Content Related pages Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4