The prefix descriptor of the @counter-style rule specifies content that will be prepended to the marker representation. If not specified, the default value will be "" (an empty string).

/* <symbol> values */ prefix: "»"; prefix: "Page "; prefix: url(bullet.png); 

prefix

The prefix descriptor of the @counter-style rule specifies content that will be prepended to the marker representation. If not specified, the default value will be "" (an empty string).

Syntax

/* <symbol> values */ prefix: "»"; prefix: "Page "; prefix: url(bullet.png); 

Values

<symbol>

Specifies a <symbol> that is prepended to the marker representation. It may be a <string>, <image>, or <custom-ident>.

Formal definition

Related at-rule	@counter-style
Initial value	"" (the empty string)
Computed value	as specified

Formal syntax

<symbol>
where <symbol> = <string> | <image> | <custom-ident>
where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] [ <resolution> || type(<string>) ]<id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )<side-or-corner> = [ left | right ] || [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>
where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage>

Examples

Adding a prefix to a counter

HTML

<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> 

CSS

@counter-style chapters {   system: numeric;   symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";   prefix: 'Chapter '; }  .index {   list-style: chapters;   padding-left: 15ch; } 

Result

Specifications

Specification
CSS Counter Styles Level 3 # counter-style-prefix

See also

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

Last modified: Aug 12, 2021, by MDN contributors