counter()

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

The counter() CSS function returns a string representing the current value of the named counter, if there is one. It is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string> value is supported.

/* Simple usage */
counter(countername);

/* changing the counter display */
counter(countername, upper-roman)

A counter has no visible effect by itself. The counter() function (and counters() function) is what makes it useful by returning developer defined strings (or images).

Note: The counter() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

Check the Browser compatibility table carefully before using this in production.

Syntax

Values

<custom-ident>
A name identifying the counter, which is the same case-sensitive name used for the counter-reset and  counter-increment. The name cannot start with two dashes and can't be none, unset, initial, or inherit.
<counter-style>
A counter style name or symbols() function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other predefined counter style. If omitted, the counter-style defaults to decimal

Formal syntax

counter( <custom-ident>, [ <counter-style> | none ]? )

where
<counter-style> = <counter-style-name> | symbols()

where
<counter-style-name> = <custom-ident>

Examples

default value compared to upper Roman

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == ["
               counter(listCounter, upper-roman) "]";
}

Result

decimal-leading-zero compared to lower-alpha

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content: "[" counter(count, decimal-leading-zero) "] == [" 
               counter(count, lower-alpha) "]";
}

Result

Specifications

Specification Status Comment
CSS Lists Module Level 3
The definition of 'CSS Counters' in that specification.
Working Draft No change
CSS Level 2 (Revision 1)
The definition of 'CSS Counters' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
counter()Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

See also