content
The content
CSS property replaces an element with a generated value. Objects inserted using the content
property are anonymous replaced elements.
/* Keywords that cannot be combined with other values */
content: normal;
content: none;
/* <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);
/* alt text for generated content, added in the Level 3 specification */
content: url("http://www.example.com/test.png") / "This is the alt text";
/* <string> value */
content: "prefix";
/* <counter> values, optionally with <list-style-type> */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);
/* attr() value linked to the HTML attribute value */
content: attr(value string);
/* Language- and position-dependent keywords */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
/* Except for normal and none, several values can be used simultaneously */
content: open-quote counter(chapter_counter);
/* Global values */
content: inherit;
content: initial;
content: revert;
content: unset;
Syntax
Values
none
-
When applied to a pseudo-element, the pseudo-element is not generated. If applied to an element, the value has no effect.
normal
-
Computes to
none
for the::before
and::after
pseudo-elements. <string>
-
Specifies the "alt text" for the element. This value can be any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example,
\000A9
represents the copyright symbol. <image>
-
An
<image>
, denoted by theurl()
or<gradient>
data type, or part of the webpage, defined by theelement()
function, denoting the content to display. counter()
-
The value of a CSS counter, generally a number produced by computations defined by
<counter-reset>
and<counter-increment>
properties. It can be displayed using either thecounter()
orcounters()
function.The
counter()
function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified<list-style-type>
(decimal
by default).The
counters()
function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated<list-style-type>
(decimal
by default). attr(x)
-
The value of the element's attribute
x
as a string. If there is no attributex
, an empty string is returned. The case-sensitivity of attribute names depends on the document language. open-quote
|close-quote
-
These values are replaced by the appropriate string from the
quotes
property. no-open-quote
|no-close-quote
-
Introduces no content, but increments (decrements) the level of nesting for quotes.
Accessibility concerns
CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.
Formal definition
Initial value | normal |
---|---|
Applies to | All elements, tree-abiding pseudo-elements, and page margin boxes |
Inherited | no |
Computed value | On elements, always computes to normal . On ::before and ::after , if normal is specified, computes to none . Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified. |
Animation type | discrete |
Formal syntax
normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> ]+ ]?where
<content-replacement> = <image>
<content-list> = [ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> ]+
<counter> = <counter()> | <counters()>where
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<quote> = open-quote | close-quote | no-open-quote | no-close-quote
<target> = <target-counter()> | <target-counters()> | <target-text()>
<leader()> = leader( <leader-type> )
<counter()> = counter( <counter-name>, <counter-style>? )
<counters()> = counters( <counter-name>, <string>, <counter-style>? )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()>
<target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )
<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )
<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )
<leader-type> = dotted | solid | space | <string>
<counter-name> = <custom-ident>
<counter-style> = <counter-style-name> | symbols()where
| rtl
= ltr
<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> )
<counter-style-name> = <custom-ident>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
Headings and quotes
This example inserts quotation marks around quotes, and adds the word "Chapter" before headings.
HTML
<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
<q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
lucky enough to invent the Web at the time when the Internet
already existed - and had for a decade and a half.</q>
We must understand that there is nothing fundamentally wrong
with building on the contributions of others.
</p>
<h1>6</h1>
<p>According to the Mozilla Manifesto,
<q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
must have the ability to shape the Internet and
their own experiences on the Internet.</q>
Therefore, we can infer that contributing to the open web
can protect our own individual experiences on it.
</p>
CSS
q {
color: blue;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
h1::before {
content: "Chapter "; /* The trailing space creates separation
between the added content and the
rest of the content */
}
Result
Image combined with text
This example inserts an image before the link. If the image is not found, it inserts text instead.
HTML
<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>
CSS
a::before {
content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " MOZILLA: ";
font: x-small Arial, sans-serif;
color: gray;
}
Result
Targeting classes
This example inserts additional text after special items in a list.
HTML
<h2>Paperback Best Sellers</h2>
<ol>
<li>Political Thriller</li>
<li class="new-entry">Halloween Stories</li>
<li>My Biography</li>
<li class="new-entry">Vampire Romance</li>
</ol>
CSS
.new-entry::after {
content: " New!"; /* The leading space creates separation
between the added content and the
rest of the content */
color: red;
}
Result
Images and element attributes
This example inserts an image before each link, and adds its id
attribute after.
HTML
<ul>
<li><a id="moz" href="https://www.mozilla.org/">
Mozilla Home Page</a></li>
<li><a id="mdn" href="https://developer.mozilla.org/">
Mozilla Developer Network</a></li>
</ul>
CSS
a {
text-decoration: none;
border-bottom: 3px dotted navy;
}
a::after {
content: " (" attr(id) ")";
}
#moz::before {
content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
}
#mdn::before {
content: url("mdn-favicon16.png");
}
li {
margin: 1em;
}
Result
Element replacement
This example replaces an element's content with an image. You can replace the contents of an element with either a url()
or an <image>
value. Content added with ::before
or ::after
will not be generated as the contents of the element have been replaced.
HTML
<div id="replaced">Mozilla</div>
CSS
#replaced {
content: url("mdn.svg");
}
#replaced::after { /* will not show if element replacement is supported */
content: " (" attr(id) ")";
}
Result
Specifications
Specification |
---|
CSS Generated Content Module Level 3 # content-property |
Browser compatibility
BCD tables only load in the browser