CSS Content Enhance Web Design with Dynamic Elements

Introduction

The content property in CSS is a powerful tool for web developers and designers. It lets you replace or insert content into an element or pseudo-element, enhancing your design without changing the original HTML. This property is great for adding decorative elements, icons, or text before or after an element’s content. Using the content property effectively can make your web pages more dynamic and visually appealing.

Syntax

The syntax for the content property in CSS is straightforward. It can define the content to be inserted or replaced within an element or pseudo-element. Here’s the basic syntax:

content: normal | none | [ <string> | <uri> | <counter> | attr(<attribute-name>) | open-quote | close-quote | no-open-quote | no-close-quote ]+;

Keywords and Values:

• normal: Keeps the default behavior with no additional content.
• none: Specifies that no content is generated.
• <string>: Inserts a specified string literal.
• <uri>: Inserts an image or other media specified by the URL.
• <counter>: Inserts a counter value from a CSS counter.
• attr(<attribute-name>): Inserts the value of the specified HTML attribute.
• open-quote: Inserts the appropriate opening quotation mark for the current language.
• close-quote: Inserts the appropriate closing quotation mark for the current language.
• no-open-quote: Prevents the insertion of an opening quotation mark.
• no-close-quote: Prevents the insertion of a closing quotation mark.

Values

The content property can take various values, each with different purposes. Here’s a breakdown:

• normal: Keeps the default behavior with no additional content.
• none: Specifies that no content is generated.
• <string>: Inserts a specified string literal.
• <uri>: Inserts an image or other media specified by the URL.
• <counter>: Inserts a counter value from a CSS counter.
• attr(<attribute-name>): Inserts the value of the specified HTML attribute.
• open-quote: Inserts the appropriate opening quotation mark for the current language.
• close-quote: Inserts the appropriate closing quotation mark for the current language.
• no-open-quote: Prevents the insertion of an opening quotation mark.
• no-close-quote: Prevents the insertion of a closing quotation mark.

Example Usage

Here are some examples to illustrate how these values can be used:

/* Inserts a string before the element */
.example::before {
  content: "Hello, ";
}

/* Inserts an image after the element */
.example::after {
  content: url("image.png");
}

/* Inserts a counter value */
.example::before {
  content: counter(chapter_counter);
}

/* Inserts the value of an HTML attribute */
.example::after {
  content: attr(data-example);
}

/* Inserts opening and closing quotation marks */
.example::before {
  content: open-quote;
}

.example::after {
  content: close-quote;
}

Normal

The normal value ensures that no additional content is generated for the ::before and ::after pseudo-elements, maintaining the default behavior.

Example:

.example::before {
  content: normal;
}

None

The none value specifies that no content is generated for the ::before and ::after pseudo-elements, effectively removing any previously inserted content.

Example:

.example::before {
  content: none;
}

.example::after {
  content: none;
}

Initial

The initial value sets the content to its initial default state as specified by the browser.

Example:

.example::before {
  content: initial;
}

.example::after {
  content: initial;
}

Attribute

The attr(<attribute-name>) value inserts the value of the specified HTML attribute into the content of the ::before and ::after pseudo-elements.

Example:

a::after {
  content: attr(href);
}

String

The <string> value allows you to insert a specified string literal into the content of the ::before and ::after pseudo-elements.

Example:

.example::before {
  content: "Hello, ";
}

.example::after {
  content: "!";
}

Open-quote

The open-quote value inserts the appropriate opening quotation mark for the current language into the content of the ::before and ::after pseudo-elements.

Example:

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

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

Example Usage

Adding Quotation Marks

HTML:

<p>
  According to Sir Tim Berners-Lee,
  <q cite="( WebsiteUrl )">
    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: #00f;
}

q::before,
q::after {
  font-size: larger;
  color: #f00;
  background: #ccc;
}

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

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

Adding Text to List Item Counters

HTML:

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

CSS:

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

Adding Attribute Values

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;
}

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. If a browser does not support alternative text, this declaration will be considered invalid, with the previous content value displaying. This fallback content list includes an image and the message ” - alt text is not supported - “.

HTML:

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

CSS:

a::before {
  /* fallback content */
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
    " - alt text is not supported - ";
  /* content with alternative text */
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}

Element Replacement with URL

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

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) ")";
}

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(). With @supports, we provide alt text support and a repeating-linear-gradient() for browsers that support alt text with element content replacement.

HTML:

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

CSS:

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

#replaced {
  content: linear-gradient(#639f, #c96a);
}

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

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">Mozilla</div>

CSS:

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

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

Browser Compatibility

The content property is widely supported across modern web browsers, ensuring that you can use it to enhance your web designs without worrying about compatibility issues. Below is a summary of the browser support for the content property:

• Google Chrome: Supports the content property since version 1.0, released in December 2008.
• Mozilla Firefox: Supports the content property since version 1.0, released in November 2004.
• Microsoft Edge: Supports the content property since version 12.0, released in July 2015.
• Internet Explorer: Supports the content property since version 8.0, released in March 2009.
• Opera: Supports the content property since version 4.0, released in June 2000.
• Safari: Supports the content property since version 1.0, released in June 2003.

While the content property is well-supported, it’s important to note that some specific features, such as using gradients as content values or alternative text with element content replacement, may not be supported in all browsers. Always test your web designs across different browsers to ensure compatibility and a consistent user experience.

For detailed information on browser compatibility, you can refer to the MDN Web Docs Browser Compatibility Data.

Accessibility

When using the content property in CSS, it’s important to consider the accessibility of your web content. CSS-generated content is not included in the Document Object Model (DOM), which means it will not be represented in the accessibility tree. As a result, certain assistive technology/browser combinations may 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.

To ensure that your web content is accessible, follow these best practices:

1. Ensure Non-Decorative Content is Accessible: If the inserted content is not purely decorative, make sure that the information is also available when CSS is turned off. This ensures that users who rely on screen readers or other assistive technologies can access the information.
2. Use ARIA Roles and Properties: Consider using Accessible Rich Internet Applications (ARIA) roles and properties to enhance the accessibility of dynamically generated content. ARIA can help screen readers better understand the structure and purpose of the content.
3. Provide Alternative Text: For images and other non-text content, always provide alternative text. This ensures that users who rely on screen readers can understand the content.
4. Test with Assistive Technologies: Regularly test your web pages with various assistive technologies to ensure that the generated content is accessible. Tools like the Firefox Accessibility Inspector, Chrome Accessibility pane, and Safari Accessibility tree can help you identify and fix accessibility issues.
5. Follow WCAG Guidelines: The Web Content Accessibility Guidelines (WCAG) provide a comprehensive set of guidelines for creating accessible web content. Following these guidelines can help ensure that your web pages are accessible to all users.

Additional Resources

• 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

By following these best practices and utilizing the available resources, you can ensure that your web content is accessible to all users, regardless of their abilities or the technologies they use. Accessibility is a crucial aspect of web development and design, and by making your content accessible, you can create a more inclusive and user-friendly web experience.

Formal Definition

The content property in CSS is formally defined by the CSS Generated Content Module. This property allows you to specify the content to be inserted before or after an element using the ::before and ::after pseudo-elements. The syntax and values for this property are outlined in the CSS specification.

Here is the formal definition of the content property:

Syntax:

content: normal | none | [ <string> | <uri> | <counter> | attr(<attribute-name>) | open-quote | close-quote | no-open-quote | no-close-quote ]+;

Values:

• normal: The default value. Computes to none for the ::before and ::after pseudo-elements, meaning no content is generated. For other pseudo-elements, it computes to contents.
• none: Specifies that no content is generated for the pseudo-elements.
• <string>: Inserts a specified string literal into the content.
• <uri>: Inserts an image or other media type specified by a URL.
• <counter>: Inserts a counter value from a CSS counter.
• attr(<attribute-name>): Inserts the value of the specified HTML attribute.
• open-quote: Inserts the appropriate opening quotation mark for the current language.
• close-quote: Inserts the appropriate closing quotation mark for the current language.
• no-open-quote: Prevents the insertion of an opening quotation mark.
• no-close-quote: Prevents the insertion of a closing quotation mark.
• / <string> | <counter>: Specifies alternative text for an image or any content list item.

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:

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

<content-replacement> = <image>;

<content-list> = [ <string> | <counter> | <content()> | <attr()> ]+;

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

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

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

<image> = <url> | <gradient> | <image-set()>;

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

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

<content()> = content( <content-type>? );

<attr-name> = <ident-token> | <string>;

<attr-type> = string | ident | color | number | percentage | length | angle | time | frequency | flex | <dimension-unit>;

<id-selector> = <hash-token>;

<url> = url( <string> <url-modifier>* ) | <url-token>;

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

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

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

Specifications:

• CSS Generated Content Module Level 3 - content-property

Understanding the formal definition of the content property helps you use it more effectively in your web development projects. By adhering to the syntax and values outlined in the specification, you can ensure that your CSS-generated content is compatible and renders correctly across different browsers and devices.