content CSS property

Try it

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

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

.topic-hot::before {
  content: url("../../../../../../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

/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <content-replacement>: <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/* speech output: alternative text after a "/"  */
content: url("../img/test.png") / "This is the alt text";
content: counter(chapter) / "Chapter " counter(chapter);

/* <string> value */
content: "unparsed text";

/* <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(href);

/* <quote> values */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* <content-list>: a list of content values. 
Several values can be used simultaneously */
content: "prefix" url("http://www.example.com/test.png");
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

/* Global values */
content: inherit;
content: initial;
content: revert;
content: revert-layer;
content: unset;

Values

The value can be:

• One of two keywords: none or normal. normal is the default property value.
• <content-replacement> when replacing a DOM node. <content-replacement> is always an <image>.
• A <content-list> when replacing pseudo-elements and margin boxes. A <content-list> is a list of one or more anonymous inline boxes appearing in the order specified. Each <content-list> item is of type <string>, <image>, <counter>, <quote>, <target>, or <leader()>.
• An optional alternative text value that can include <string>, <counter>, or attr() function values, preceded by a slash (/).

The keywords and data types mentioned above are described in more detail below:

none

When applied to a pseudo-element, the pseudo-element is not generated. When applied to an element, the value has no effect.

normal

For the ::before and ::after pseudo-elements, this value computes to none . For other pseudo-elements such as ::marker, ::placeholder, or ::file-selector-button, it produces the element's initial (or normal) content. For regular elements or page margin boxes, it computes to the element's descendants. This is the default value.

<string>

A sequence of characters enclosed in matching single or double quotes. Multiple string values will be concatenated (there is no concatenation operator in CSS).

<image>

An <image>, representing an image to display. This can be equal to a <url>, image-set(), or <gradient> data type, or a part of the webpage itself, defined by the element() function.

<counter>

The <counter> value is a CSS counter, generally a number produced by computations defined by <counter-reset> and <counter-increment> properties. It can be displayed using either the counter() or counters() function.

counter()

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

counters()

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

<quote>

The <quote> data type includes language- and position-dependent keywords:

open-quote and close-quote

These values are replaced by the appropriate string from the quotes property.

no-open-quote and no-close-quote

Introduces no content, but increments (decrements) the level of nesting for quotes.

<target>

The <target> data type includes three target functions, <target-counter()>, <target-counters()>, and <target-text()> that create cross-references obtained from the target end of a link. See Formal syntax.

<leader()>

The <leader()> data type includes a leader function: leader( <leader-type> ). This function accepts the keyword values dotted, solid, or space (equal to leader("."), leader("_"), and leader(" "), respectively), or a <string> as a parameter. When supported and used as a value for content, the leader-type provided will be inserted as a repeating pattern, visually connecting content across a horizontal line.

attr(x)

The attr(x) CSS function retrieves the value of an attribute of the selected element, or the pseudo-element's originating element. The value of the element's attribute x is an unparsed string representing the attribute name. If there is no attribute x, an empty string is returned. The case sensitivity of the attribute name parameter depends on the document language.

alternative text: / <string> | <counter> | attr()

Alternative text may be specified for an image or any <content-list> items, by appending a forward slash and then a combination of strings, counters, and attr() functions. The alternative text is intended for speech output by screen-readers, but may also be displayed in some browsers.

Formal definition

Formal syntax

content = 
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?  |
  <element()>                                         

<content-replacement> = 
  <image>  

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

<counter> = 
  <counter()>   |
  <counters()>  

<attr()> = 
  attr( <attr-name> <attr-type>? , <declaration-value>? )  

<element()> = 
  element( <id-selector> )  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<quote> = 
  open-quote      |
  close-quote     |
  no-open-quote   |
  no-close-quote  

<leader()> = 
  leader( <leader-type> )  

<target> = 
  <target-counter()>   |
  <target-counters()>  |
  <target-text()>      

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

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

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<attr-name> = 
  [ <ident-token>? '|' ]? <ident-token>  

<attr-type> = 
  type( <syntax> )  |
  raw-string        |
  number            |
  <attr-unit>       

<id-selector> = 
  <hash-token>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<leader-type> = 
  dotted    |
  solid     |
  space     |
  <string>  

<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 ]? )  

<counter-name> = 
  <custom-ident>  

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

<syntax> = 
  '*'                                                 |
  <syntax-component> [ <syntax-combinator> <syntax-component> ]*  |
  <syntax-string>                                     

<attr-unit> = 
  <custom-ident>  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<counter-style-name> = 
  <custom-ident>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<syntax-component> = 
  <syntax-single-component> <syntax-multiplier>?  |
  '<' transform-list '>'                          

<syntax-combinator> = 
  '|'  

<syntax-string> = 
  <string>  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<syntax-single-component> = 
  '<' <syntax-type-name> '>'  |
  <ident>                     

<syntax-multiplier> = 
  '#'  |
  '+'  

<syntax-type-name> = 
  angle               |
  color               |
  custom-ident        |
  image               |
  integer             |
  length              |
  length-percentage   |
  number              |
  percentage          |
  resolution          |
  string              |
  time                |
  url                 |
  transform-function  

Accessibility

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.

If inserted content is not decorative, check that the information is provided to assistive technologies and is also available when CSS is turned off.

• Accessibility support for CSS generated content – Tink (2015)
• WCAG, Guideline 1.3: Create content that can be presented in different ways
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• Failure of Success Criterion 1.3.1: inserting non-decorative generated content Techniques for WCAG 2.0

Examples

The first five examples create generated content on pseudo-elements. The last three are examples of element replacement.

Appending strings based on an element's class

This example inserts generated text after the text of elements that have a particular class name. The text is colored red.

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 DOM node's content and the generated content
                       being added. */
  color: red;
}

Result

Quotes

This example inserts differently colored quotation marks around quotes.

HTML

<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>
<p lang="fr-fr">
  Mais c'est Magritte qui a dit,
  <q lang="fr-fr"> Ceci n'est pas une pipe. </q>.
</p>

CSS

q {
  color: blue;
}

q::before,
q::after {
  font-size: larger;
  color: red;
  background: #cccccc;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

Result

Note the type of quotes generated is based on the language. Browsers add open- and close-quotes before and after <q> elements by default, so the quotes in this example would appear without them being explicitly set. They could have been turned off by setting the respective content property values to no-open-quote and no-close-quote, or by setting them both to none. They can also be turned off by setting the quotes property to none instead.

Adding text to list item counters

This example combines a counter sandwiched between two <string>s prepended to all list items, creating a more detailed marker for list items (<li>) within unordered lists (<ol>).

HTML

<ol>
  <li>Dogs</li>
  <li>Cats</li>
  <li>
    Birds
    <ol>
      <li>Owls</li>
      <li>Ducks</li>
      <li>Flightless</li>
    </ol>
  </li>
  <li>Marsupials</li>
</ol>

CSS

ol {
  counter-reset: items;
  margin-left: 2em;
}
li {
  counter-increment: items;
}
li::marker {
  content: "item " counters(items, ".", numeric) ": ";
}

Result

The generated content on each list item's marker adds the text "item " as a prefix, including a space to separate the prefix from the counter, which is followed by ": ", a colon and an additional space. The counters() function defines a numeric items counter, in which the numbers of nested ordered lists have their numbers separated with a period (.) in most browsers.

Strings with attribute values

This example is useful for print stylesheets. It uses an attribute selector to select every fully qualified secure link, adding the value of the href attribute after the link text as the content of the ::after pseudo-element.

HTML

<ul>
  <li><a href="https://mozilla.com">Mozilla</a></li>
  <li><a href="/">MDN</a></li>
  <li><a href="https://openwebdocs.org">OpenWebDocs</a></li>
</ul>

CSS

a[href^="https://"]::after {
  content: " (URL: " attr(href) ")";
  color: darkgreen;
}

Result

The generated content is the value of the href attribute, prepended by "URL: ", with a space, all in parentheses.

Adding an image with alternative text

This example inserts an image before all links. Two content values are provided. The later content value includes an image with alternative text that a screen reader can output as speech.

HTML

<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS

The CSS to show the image and set the alternative text is shown below. This also sets the font and color for the content.

a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
}

Result

If using a screen reader, it should speak the word "MOZILLA" when it reaches the image. You can select the ::before pseudo-element with your developer tools selection tool, and view the accessible name in the accessibility panel.

Including counters in alternative text

This example features a list of links to a set of book chapters, and shows how to use generated content to include a book icon and a counter before each one, with alternative text that includes the literal word "Chapter" in place of the icon. This results in the word "chapter" and the chapter number preceding the text in each link's accessible name, which will be announced to screen reader users when the link receives focus.

HTML

We include a heading followed by an ordered list of chapter title links using <ol>, <li>, and <a> elements.

<h2>Chapter list</h2>
<ol>
  <li><a href="#">A stranger calls</a></li>
  <li><a href="#">Two owls</a></li>
  <li><a href="#">Dinner was bland</a></li>
  <li><a href="#">Three owls</a></li>
  <li><a href="#">No-one answered the door</a></li>
  <li><a href="#">The stranger leaves</a></li>
  <li><a href="#">Bedtime</a></li>
</ol>

CSS

The CSS includes a counter-reset for the chapter counter on the <ol> element. We also increment the chapter counter on each <li> element using counter-increment, and remove the list markers by setting a list-style-type value of none.

ol {
  counter-reset: chapter;
}

li {
  counter-increment: chapter;
  list-style-type: none;
}

Next, we set the <a> elements' ::before pseudo-elements to have generated content equal to a book emoji to represent a chapter, plus the current chapter counter value, and a space character so that the generated content is separated from the link text. Finally, we set the generated content's alt text to the current chapter counter value preceded by the word "Chapter".

a::before {
  content: "📖 " counter(chapter) " " / "Chapter " counter(chapter);
}

Result

When a screen reader navigates to a link within the list, supporting browsers will announce "Chapter" followed by the current counter number, followed by the link text, for example, "Chapter 1 A stranger calls" and "Chapter 2 Two owls".

Element replacement with URL

This example replaces a regular element! The element's contents are replaced with an SVG using the <url> type.

Pseudo-elements aren't rendered on replaced elements. As this element is replaced, any matching ::after or ::before are not generated or applied. To demonstrate this, we include an ::after declaration block, attempting to add the id as generated content. This pseudo-element will not be generated as the element is replaced.

HTML

<div id="replaced">This content is replaced!</div>

CSS

#replaced {
  content: url("mdn.svg");
}

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

Result

When generating content on regular elements (rather than just on pseudo-elements), the entire element is replaced. This means that ::before and ::after pseudo-elements are not generated.

Element replacement with <gradient>

This example demonstrates how an element's contents can be replaced by any type of <image>, in this case, a CSS gradient. The element's contents are replaced with a linear-gradient(). We provide alt text because all images should be described for accessibility.

HTML

<div id="replaced">I disappear</div>

CSS

div {
  border: 1px solid;
  background-color: #cccccc;
  min-height: 100px;
  min-width: 100px;
}

#replaced {
  content: repeating-linear-gradient(blue 0, orange 10%) /
    "Gradients and alt text are supported";
}

Result

Check the browser compatibility chart. All browsers support gradients and all browsers support replacing elements with images, but not all browsers support gradients as a content value.

Element replacement with image-set()

This example replaces an element's content with an image-set(). If the users display has normal resolution the 1x.png will be displayed. Screens with a higher resolution will display the 2x.png image.

HTML

<div id="replaced">I disappear!</div>

CSS

div {
  width: 100px;
  border: 1px solid lightgrey;
}

#replaced {
  content: image-set(
    "1x.png" 1x,
    "2x.png" 2x
  ) / "DPI";
}

Result

Specifications

Browser compatibility

See also

• ::after
• ::before
• ::marker
• ::scroll-button()
• ::scroll-marker
• :target-current
• contain
• quotes
• <gradient>
• image-set()
• <url>
• Replaced elements
• CSS generated content module
• CSS lists and counters module
• Browser accessibility panels: Firefox Accessibility inspector, Chrome Accessibility pane, and Safari Accessibility tree