CSS - prefix

Example

<ul class="index">
  <li>The Boy Who Lived</li>
  <li>The Vanishing Glass</li>
  <li>The Letters from No One</li>
  <li>The Keeper of the Keys</li>
  <li>Diagon Alley</li>
</ul>

@counter-style chapters {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: 'Chapter ';
}

.index {
  list-style: chapters;
}

Syntax  

/* <symbol> values */
prefix: "»";
prefix: "Page";

Values

<symbol>

Specifies a <symbol> that is prepended to the marker representation.

Formal syntax

<a href="css/@counter-style/prefix#symbol"><symbol></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/prefix#image()"><image()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#image-set()"><image-set()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#element()"><element()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#cross-fade()"><cross-fade()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#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/prefix#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/prefix#cf-mixing-image"><cf-mixing-image></a> , <a href="css/@counter-style/prefix#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/prefix#linear-gradient()"><linear-gradient()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#repeating-linear-gradient()"><repeating-linear-gradient()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#radial-gradient()"><radial-gradient()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#repeating-radial-gradient()"><repeating-radial-gradient()></a></code></p><p>where <br><code><color> = <a href="css/@counter-style/prefix#rgb()"><rgb()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#rgba()"><rgba()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#hsl()"><hsl()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@counter-style/prefix#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/prefix#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/prefix#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/prefix#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/prefix#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/prefix#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/prefix#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/prefix#ending-shape"><ending-shape></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/@counter-style/prefix#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/prefix#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/prefix#ending-shape"><ending-shape></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/@counter-style/prefix#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/prefix#color-stop-list"><color-stop-list></a> )</code></p><p>where <br><code><rgb()> = rgb( <a href="css/@counter-style/prefix#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/prefix#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/prefix#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/@counter-style/prefix#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/prefix#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a>, <a href="css/@counter-style/prefix#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/prefix#color-stop"><color-stop></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><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 title="Brackets" href="css/value_definition_syntax#brackets">[</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 title="" href="css/percentage"><percentage></a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</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></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 title="Brackets" href="css/value_definition_syntax#brackets">[</a> <a title="" href="css/percentage"><percentage></a> <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="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a></code></p>

Description  

The prefix descriptor of the @counter-style rule allows authors to specify a symbol that will be prepended to the marker representation. If no value is specified, the default value will be the empty string.

Browser Compatibility  

See Also  

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

Specifications  

License