Web/CSS/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);

/* alt text for generated content, added in the Level 3 specification */
content: url("http://www.example.com/test.png") / "This is the alt text";

/* values below can only be applied to generated content using ::before and ::after */

/* <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: unset;

Syntax

Values

none

The pseudo-element is not generated.

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 the <url> or <gradient> data type, or part of the webpage, defined by the element() 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> properies. It can be displayed using either the counter or counters 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 attribute x, 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	`::before` and `::after` pseudo-elements
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> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+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> )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>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><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> = <counter-style-name> | symbols()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>? )<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><counter-style-name> = <custom-ident>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="http://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="http://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("https://mdn.mozillademos.org/files/7691/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("https://mdn.mozillademos.org/files/12668/MDN.svg");
}

#replaced::after { /* will not show if element replacement is supported */
  content: " (" attr(id) ")"; 
}

Result

Specifications

Specification	Status	Comment
CSS Generated Content Module Level 3The definition of 'content' in that specification.	Working Draft	Adds support for alt-text
CSS Level 2 (Revision 1)The definition of 'content' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`content`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 8	Opera Full support 4	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Alternative text after `/`	Chrome Full support 77	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 64	Safari No support No	WebView Android Full support 77	Chrome Android Full support 77	Firefox Android No support No	Opera Android Full support 55	Safari iOS No support No	Samsung Internet Android Full support 12.0
Element replacement	Chrome Full support 28	Edge Full support 79	Firefox Full support 63	IE No support No	Opera Full support 7	Safari Full support 9	WebView Android Full support ≤37	Chrome Android Full support 28	Firefox Android Full support 63	Opera Android Full support 10.1	Safari iOS Full support 9	Samsung Internet Android Full support 1.5
`url()`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 8	Opera Full support 7	Safari Full support 1	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
No support: No support

Web/CSS/content

Contents

Syntax

Values

Accessibility concerns

Formal definition

Formal syntax

Examples

Headings and quotes

HTML

CSS

Result

Image combined with text

HTML

CSS

Result

Targeting classes

HTML

CSS

Result

Images and element attributes

HTML

CSS

Result

Element replacement

HTML

CSS

Result

Specifications

Browser compatibility

Legend

See also