CSS - symbols

Example

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;    
}

Syntax  

symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url('first.svg') url('second.svg') url('third.svg');
symbols: indic-numbers;

Values

<symbol>

Represents a <symbol> used within the counter system.

Formal syntax

<a href="css/@counter-style/symbols#symbol"><symbol></a><a title="Plus" href="css/value_definition_syntax#plus_(.2b)">+</a><p>where <br><code><symbol> = <a title="" href="css/string"><string></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/image"><image></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <ident></code></p><p>where <br><code><image> = <a title="" href="css/url"><url></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#image()"><image()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#image-set()"><image-set()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#element()"><element()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#cross-fade()"><cross-fade()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#gradient"><gradient></a></code></p><p>where <br><code><image()> = image( <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="" href="css/image"><image></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/string"><string></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> , <a title="" href="css/color_value"><color></a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a>! )<br><image-set()> = image-set( <a href="css/@counter-style/symbols#image-set-option"><image-set-option></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a> )<br><element()> = element( <id-selector> )<br><cross-fade()> = cross-fade( <a href="css/@counter-style/symbols#cf-mixing-image"><cf-mixing-image></a> , <a href="css/@counter-style/symbols#cf-final-image"><cf-final-image></a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> )<br><gradient> = <a href="css/@counter-style/symbols#linear-gradient()"><linear-gradient()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#repeating-linear-gradient()"><repeating-linear-gradient()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#radial-gradient()"><radial-gradient()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#repeating-radial-gradient()"><repeating-radial-gradient()></a></code></p><p>where <br><code><color> = <a href="css/@counter-style/symbols#rgb()"><rgb()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#rgba()"><rgba()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#hsl()"><hsl()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#hsla()"><hsla()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <hex-color> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#named-color"><named-color></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> currentcolor <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#deprecated-system-color"><deprecated-system-color></a><br><image-set-option> = <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="" href="css/image"><image></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/string"><string></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a title="" href="css/resolution"><resolution></a><br><cf-mixing-image> = <a title="" href="css/percentage"><percentage></a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> && <a title="" href="css/image"><image></a><br><cf-final-image> = <a title="" href="css/image"><image></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/color_value"><color></a><br><linear-gradient()> = linear-gradient( <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad." href="css/angle"><angle></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> to <a href="css/@counter-style/symbols#side-or-corner"><side-or-corner></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> , <a href="css/@counter-style/symbols#color-stop-list"><color-stop-list></a> )<br><repeating-linear-gradient()> = repeating-linear-gradient( <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad." href="css/angle"><angle></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> to <a href="css/@counter-style/symbols#side-or-corner"><side-or-corner></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> , <a href="css/@counter-style/symbols#color-stop-list"><color-stop-list></a> )<br><radial-gradient()> = radial-gradient( <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a href="css/@counter-style/symbols#ending-shape"><ending-shape></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/@counter-style/symbols#size"><size></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> at <a title="" href="css/position_value"><position></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> , <a href="css/@counter-style/symbols#color-stop-list"><color-stop-list></a> )<br><repeating-radial-gradient()> = repeating-radial-gradient( <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a href="css/@counter-style/symbols#ending-shape"><ending-shape></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/@counter-style/symbols#size"><size></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> at <a title="" href="css/position_value"><position></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> , <a href="css/@counter-style/symbols#color-stop-list"><color-stop-list></a> )</code></p><p>where <br><code><rgb()> = rgb( <a href="css/@counter-style/symbols#rgb-component"><rgb-component></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>3<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> )<br><rgba()> = rgba( <a href="css/@counter-style/symbols#rgb-component"><rgb-component></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>3<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> , <a href="css/@counter-style/symbols#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/@counter-style/symbols#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a> )<br><hsla()> = hsla( <a href="css/@counter-style/symbols#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a>, <a href="css/@counter-style/symbols#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ActiveCaption <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> AppWorkspace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Background <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonFace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonHighlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> CaptionText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> GrayText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Highlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> HighlightText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveBorder <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveCaption <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveCaptionText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InfoBackground <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InfoText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Menu <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> MenuText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Scrollbar <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDDarkShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDFace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDHighlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDLightShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Window <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> WindowFrame <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> WindowText<br><side-or-corner> = <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> left <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> right <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> top <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> bottom <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><br><color-stop-list> = <a href="css/@counter-style/symbols#color-stop"><color-stop></a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>2,}<br><ending-shape> = circle <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ellipse<br><size> = closest-side <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> farthest-side <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> closest-corner <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> farthest-corner <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0" href="css/length"><length></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#length-percentage"><length-percentage></a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>2<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a><br><position> = <a title="Brackets" href="css/value_definition_syntax#brackets">[</a><a title="Brackets" href="css/value_definition_syntax#brackets">[</a> left <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> center <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> right <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> top <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> bottom <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#length-percentage"><length-percentage></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> left <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> center <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> right <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#length-percentage"><length-percentage></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> top <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> center <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> bottom <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/symbols#length-percentage"><length-percentage></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> center <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> left <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> right <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a href="css/@counter-style/symbols#length-percentage"><length-percentage></a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> && <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> center <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> top <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> bottom <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a href="css/@counter-style/symbols#length-percentage"><length-percentage></a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Brackets" href="css/value_definition_syntax#brackets">]</a><br></code></p><p>where <br><code><rgb-component> = <a title="" href="css/integer"><integer></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/percentage"><percentage></a><br><alpha-value> = <a title="" href="css/number"><number></a><br><hue> = <a title="" href="css/number"><number></a><br><color-stop> = <a title="" href="css/color_value"><color></a> <a href="css/@counter-style/symbols#length-percentage"><length-percentage></a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a><br><length-percentage> = <a title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0" href="css/length"><length></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/percentage"><percentage></a></code></p>

Description  

The symbols descriptor is used to specify the symbols that the specified counter system will use to construct counter representations. A symbol can be a string, image, or identifier. The symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed. When the additive system is used, the additive-symbols descriptor is used to specify the symbols.

The possible values of the symbols descriptor include:

• Strings - sequence of characters enclosed in single or double quotes. Backslash (\) can be used to escape special characters. For example, Unicode characters can be specified in the format "\24B6".
• Images - In the format url(path-to-image.png)
• Identifiers

Browser Compatibility  

[1] Gecko does not support images for the symbols descriptor yet. See bug 1024179.

See Also  

• list-style, list-style-image, list-style-position
• symbols(), the functional notation creating anonymous counter styles.

Specifications  

License