Working Draft · css-content

CSS Generated Content

6 properties, 6 functions defined by this specification, 3 of them known to at least one browser (the others are badged Not in any browser yet).

Modern CSS features in this module: Alt text for generated content, image-set().

Read the Editor's Draft ↗ W3C Working Draft ↗

Each feature in detail

`bookmark-label`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<content-list>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: content(text)
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: specified value
Canonical order: per grammar
Animation type: discrete

Specification ↗

`bookmark-level`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | <integer [1,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: the keyword none or the specified integer
Canonical order: per grammar
Animation type: by computed value type

Specification ↗

`bookmark-state`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

open | closed

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: open
Applies to: block-level elements
Inherited: no
Percentages: N/A
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Specification ↗

`content`

Property Baseline: widely availablesince January 2018 Modern CSS: Alt text for generated content Modern CSS: image-set()

MDN The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated "alt" text). For pseudo-elements and margin boxes, content defines the content as images, text, both, or none, which determines whether the element renders at all.

Live preview Example from MDN

.topic-games::before {
  content: "🎮 " / "games";
}

.topic-weather::before {
  content: "⛅ " / "cloudy";
}

.topic-hot::before {
  content: url("https://developer.mozilla.org/shared-assets/images/examples/fire.png") / "On fire";
  margin-right: 6px;
}

<p class="topic-games">Game News: A new inFamous is not planned</p>

<p class="topic-weather">
  Weather for Today: Heat, violent storms and twisters
</p>

<p class="topic-hot">Trending Article: Must-watch videos of the week</p>

Syntax

normal | none | [ <content-replacement> | <content-list> ] [/ <alt-text> ]? | <element()>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: all elements, tree-abiding pseudo-elements, and page margin boxes
Inherited: no
Percentages: n/a
Computed value: See prose below
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting content
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ Extended in css-gcpm-3 ↗ MDN reference ↗

`quotes`

Property Baseline: widely availablesince October 2023

MDN The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML <q> element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.

Live preview Example from MDN

q {
  font-size: 1.2rem;
}

<section id="default-example">
  <q id="example-element"
    >Show us the wonder-working <q>Brothers,</q> let them come out publicly—and
    we will believe in them!</q
  >
</section>

Syntax

auto | none | bikeshed-this | [ <string> <string> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements
Inherited: yes
Percentages: n/a
Computed value: the keyword none, the keyword auto, a content language, or a list, each item a pair of string values
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting quotes
Chrome	11
Edge	12
Firefox	1.5
Safari	9
Chrome Android	18
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`string-set`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <custom-ident> <string>+ ]#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements, but not pseudo-elements
Inherited: no
Percentages: N/A
Computed value: the keyword none or a list, each item an identifier paired with a list of string values
Canonical order: per grammar
Animation type: discrete

Specification ↗

`content()`

Function Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

content( [ text | before | after | first-letter | marker ]? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`leader()`

Function Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

leader( <leader-type> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`string()`

Function Baseline: widely availablesince January 2018

MDN The <string> CSS data type represents a sequence of characters. Strings are used in numerous CSS properties, such as content, font-family, and quotes.

Syntax

string( <custom-ident> , [ first | start | last | first-except ]? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting string()
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`target-counter()`

Function Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`target-counters()`

Function Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`target-text()`

Function Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗