content

The content CSS property dictates what is rendered inside an element or pseudo-element.

Syntax

CSS

content: value;

JS

object.style.content = "value";

Values

<'content'> = normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> ]+ ]?
normal

Computes to none for the :before and :after pseudo-elements.

none

The pseudo-element is not generated.

<content-replacement> = <image>
<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

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

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

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

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<content-list> = [ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> ]+
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

contents

<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

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

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

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

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<counter>

Specifies counter() or counters().

<quote>

Specifies quotation marks.

close-quote

Replaces close quotation mark with a string from the quotes property.

no-close-quote

Removes close quotation mark.

no-open-quote

Removes open quotation mark.

open-quote

Replaces open quotation mark with a string from the quotes property.

<target> = <target-counter()> | <target-counters()> | <target-text()>
target-counter() = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

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

A <custom-ident> that is not an ASCII case-insensitive match for "none".

<symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed
cyclic

Cycles repeatedly through its provided symbols, looping back to the beginning when it reaches the end of the list.

numeric

Interprets the list of counter symbols as digits to a place-value numbering system.

decimal

Western decimal numbers (1, 2, 3, ..., 98, 99, 100).

decimal-leading-zero

Decimal numbers padded by initial zeros (01, 02, 03, ..., 98, 99, 100).

arabic-indic

Arabic-indic numbering (١‎, ٢‎, ٣‎, ٤‎, ..., ٩٨‎, ٩٩‎, ١٠٠‎).

armenian
upper-armenian

Traditional uppercase Armenian numbering (Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ).

lower-armenian

Lowercase Armenian numbering (ա, բ, գ, ..., ղը, ղթ, ճ).

bengali

Bengali numbering (১, ২, ৩, ..., ৯৮, ৯৯, ১০০).

cambodian
khmer

Cambodian/Khmer numbering (១, ២, ៣, ..., ៩៨, ៩៩, ១០០).

cjk-decimal

Han decimal numbers (一, 二, 三, ..., 九八, 九九, 一〇〇).

devanagari

devanagari numbering (१, २, ३, ..., ९८, ९९, १००).

georgian

Traditional Georgian numbering (ა, ბ, გ, ..., ჟჱ, ჟთ, რ).

gujarati

Gujarati numbering (૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦).

gurmukhi

Gurmukhi numbering (੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦).

hebrew

Traditional Hebrew numbering (א‎, ב‎, ג‎, ..., צח‎, צט‎, ק‎).

kannada

Kannada numbering (೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦).

lao

Laotian numbering (໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐).

malayalam

Malayalam numbering (൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦).

mongolian

Mongolian numbering (᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐).

myanmar

Myanmar (Burmese) numbering (၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀).

oriya

Oriya numbering (୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦).

persian

Persian numbering (۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰).

lower-roman

Lowercase ASCII Roman numerals (i, ii, iii, ..., xcviii, xcix, c).

upper-roman

Uppercase ASCII Roman numerals (I, II, III, ..., XCVIII, XCIX, C).

tamil

Tamil numbering (௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦).

telugu

Telugu numbering (౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦).

thai

Thai (Siamese) numbering (๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐).

tibetan

Tibetan numbering (༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠).

alphabetic

Interprets the list of counter symbols as digits to an alphabetic numbering system.

lower-alpha
lower-latin

Lowercase ASCII letters (a, b, c, ..., z, aa, ab).

upper-alpha
upper-latin

Uppercase ASCII letters (A, B, C, ..., Z, AA, AB).

lower-greek

Lowercase classical Greek (α, β, γ, ..., ω, αα, αβ).

hiragana

Dictionary-order hiragana lettering (あ, い, う, ..., ん, ああ, あい).

hiragana-iroha

Iroha-order hiragana lettering (い, ろ, は, ..., す, いい, いろ).

katakana

Dictionary-order katakana lettering (ア, イ, ウ, ..., ン, アア, アイ).

katakana-iroha

Iroha-order katakana lettering (イ, ロ, ハ, ..., ス, イイ, イロ).

symbolic

Cycles repeatedly through its provided symbols, doubling, tripling, etc. the symbols on each successive pass through the list.

disc

A filled circle, similar to • U+2022 BULLET.

circle

A hollow circle, similar to ◦ U+25E6 WHITE BULLET.

square

A filled square, similar to ◾ U+25FE BLACK MEDIUM SMALL SQUARE.

disclosure-open

Symbol appropriate for indicating an open disclosure widget.

disclosure-closed

Symbol appropriate for indicating a closed disclosure widget.

fixed

Runs through its list of counter symbols once, then falls back.

cjk-earthly-branch

Han "Earthly Branch" ordinals (子, 丑, 寅, ..., 亥).

cjk-heavenly-stem

Han "Heavenly Stem" ordinals (甲, 乙, 丙, ..., 癸).

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

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

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

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

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

target-counters() = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

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

A <custom-ident> that is not an ASCII case-insensitive match for "none".

<symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed
cyclic

Cycles repeatedly through its provided symbols, looping back to the beginning when it reaches the end of the list.

numeric

Interprets the list of counter symbols as digits to a place-value numbering system.

decimal

Western decimal numbers (1, 2, 3, ..., 98, 99, 100).

decimal-leading-zero

Decimal numbers padded by initial zeros (01, 02, 03, ..., 98, 99, 100).

arabic-indic

Arabic-indic numbering (١‎, ٢‎, ٣‎, ٤‎, ..., ٩٨‎, ٩٩‎, ١٠٠‎).

armenian
upper-armenian

Traditional uppercase Armenian numbering (Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ).

lower-armenian

Lowercase Armenian numbering (ա, բ, գ, ..., ղը, ղթ, ճ).

bengali

Bengali numbering (১, ২, ৩, ..., ৯৮, ৯৯, ১০০).

cambodian
khmer

Cambodian/Khmer numbering (១, ២, ៣, ..., ៩៨, ៩៩, ១០០).

cjk-decimal

Han decimal numbers (一, 二, 三, ..., 九八, 九九, 一〇〇).

devanagari

devanagari numbering (१, २, ३, ..., ९८, ९९, १००).

georgian

Traditional Georgian numbering (ა, ბ, გ, ..., ჟჱ, ჟთ, რ).

gujarati

Gujarati numbering (૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦).

gurmukhi

Gurmukhi numbering (੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦).

hebrew

Traditional Hebrew numbering (א‎, ב‎, ג‎, ..., צח‎, צט‎, ק‎).

kannada

Kannada numbering (೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦).

lao

Laotian numbering (໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐).

malayalam

Malayalam numbering (൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦).

mongolian

Mongolian numbering (᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐).

myanmar

Myanmar (Burmese) numbering (၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀).

oriya

Oriya numbering (୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦).

persian

Persian numbering (۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰).

lower-roman

Lowercase ASCII Roman numerals (i, ii, iii, ..., xcviii, xcix, c).

upper-roman

Uppercase ASCII Roman numerals (I, II, III, ..., XCVIII, XCIX, C).

tamil

Tamil numbering (௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦).

telugu

Telugu numbering (౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦).

thai

Thai (Siamese) numbering (๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐).

tibetan

Tibetan numbering (༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠).

alphabetic

Interprets the list of counter symbols as digits to an alphabetic numbering system.

lower-alpha
lower-latin

Lowercase ASCII letters (a, b, c, ..., z, aa, ab).

upper-alpha
upper-latin

Uppercase ASCII letters (A, B, C, ..., Z, AA, AB).

lower-greek

Lowercase classical Greek (α, β, γ, ..., ω, αα, αβ).

hiragana

Dictionary-order hiragana lettering (あ, い, う, ..., ん, ああ, あい).

hiragana-iroha

Iroha-order hiragana lettering (い, ろ, は, ..., す, いい, いろ).

katakana

Dictionary-order katakana lettering (ア, イ, ウ, ..., ン, アア, アイ).

katakana-iroha

Iroha-order katakana lettering (イ, ロ, ハ, ..., ス, イイ, イロ).

symbolic

Cycles repeatedly through its provided symbols, doubling, tripling, etc. the symbols on each successive pass through the list.

disc

A filled circle, similar to • U+2022 BULLET.

circle

A hollow circle, similar to ◦ U+25E6 WHITE BULLET.

square

A filled square, similar to ◾ U+25FE BLACK MEDIUM SMALL SQUARE.

disclosure-open

Symbol appropriate for indicating an open disclosure widget.

disclosure-closed

Symbol appropriate for indicating a closed disclosure widget.

fixed

Runs through its list of counter symbols once, then falls back.

cjk-earthly-branch

Han "Earthly Branch" ordinals (子, 丑, 寅, ..., 亥).

cjk-heavenly-stem

Han "Heavenly Stem" ordinals (甲, 乙, 丙, ..., 癸).

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]
left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

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

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

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

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

target-text() = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url> = url( <string> <url-modifier>* )
<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

content

before

after

first-letter

<leader()>

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<counter>

Specifies counter() or counters().

Initial

normal

Examples

1 · attr

2 · content-list

3 · content-replacement

4 · counter

5 · none

6 · normal

7 · quote · close-quote

8 · quote · no-close-quote

9 · quote · no-open-quote

10 · quote · open-quote

11 · string

quotes

accent-color

align-content

align-items

align-self

all

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

appearance

aspect-ratio

backdrop-filter

backface-visibility

background

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

block-ellipsis

block-size

border

border-block

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-color

border-end-end-radius

border-end-start-radius

border-image

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left

border-left-color

border-left-style

border-left-width

border-radius

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-start-end-radius

border-start-start-radius

border-style

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-width

bottom

box-decoration-break

box-shadow

box-sizing

caption-side

caret

caret-color

caret-shape

clear

clip

clip-path

color

color-scheme

column-count

column-fill

column-gap

column-rule

column-rule-color

column-rule-style

column-rule-width

column-span

column-width

columns

contain

container

container-name

container-type

content-visibility

continue

counter-increment

counter-reset

counter-set

cursor

direction

display

empty-cells

filter

flex

flex-basis

flex-direction

flex-flow

flex-grow

flex-shrink

flex-wrap

float

font

font-family

font-feature-settings

font-kerning

font-optical-sizing

font-size

font-size-adjust

font-stretch

font-style

font-variant

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

font-weight

forced-color-adjust

gap

grid

grid-area

grid-auto-columns

grid-auto-flow

grid-auto-rows

grid-column

grid-column-end

grid-column-start

grid-row

grid-row-end

grid-row-start

grid-template

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

height

hyphens

image-rendering

inline-size

inset

inset-block

inset-block-end

inset-block-start

inset-inline

inset-inline-end

inset-inline-start

isolation

justify-content

justify-items

justify-self

left

letter-spacing

line-break

line-clamp

line-height

list-style

list-style-image

list-style-position

list-style-type

margin

margin-block

margin-block-end

margin-block-start

margin-bottom

margin-inline

margin-inline-end

margin-inline-start

margin-left

margin-right

margin-top

mask

mask-border

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

mask-clip

mask-composite

mask-image

mask-mode

mask-origin

mask-position

mask-repeat

mask-size

mask-type

max-block-size

max-height

max-inline-size

max-lines

max-width

min-block-size

min-height

min-inline-size

min-width

mix-blend-mode

nav-down

nav-left

nav-right

nav-up

object-fit

object-position

opacity

orphans

outline

outline-color

outline-offset

outline-style

outline-width

overflow

overflow-block

overflow-clip-margin

overflow-inline

overflow-wrap

overflow-x

overflow-y

padding

padding-block

padding-block-end

padding-block-start

padding-bottom

padding-inline

padding-inline-end

padding-inline-start

padding-left

padding-right

padding-top

paint-order

perspective

perspective-origin

place-content

place-items

place-self

pointer-events

position

print-color-adjust

quotes

resize

right

rotate

row-gap

scale

scroll-behavior

scroll-margin

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

shape-margin

shape-outside

tab-size

table-layout

text-align

text-align-all

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-indent

text-justify

text-orientation

text-overflow

text-shadow

text-transform

text-underline-offset

text-underline-position

top

transform

transform-box

transform-origin

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

translate

unicode-bidi

vertical-align

visibility

white-space

widows

width

word-break

word-spacing

word-wrap

writing-mode

z-index

World Wide Web Consortium (W3C)

Home Menu