CSS - Content

The CSS property content is used to replace an element or pseudo-element's content with a produced value in order to change the output that is displayed.

It manages how elements are rendered normally or when an image and related alt text are used in instead of the element.
It defines content as pictures, text, both, or none at all in the case of pseudo-elements and margin boxes, deciding whether the element renders at all.
Elements that are replaced anonymously are those that are introduced using the content attribute.

Possible values

none - It has no effect when applied straight to an element; when used on a pseudo-element, it does not generate the pseudo-element.
normal - Page margin boxes and ordinary elements have a default value of contents, but pseudo-elements such as ::before and ::after compute to none.
<string> - Strings are character sequences encapsulated in matching single or double quotes. Concatenating multiple string values is possible in CSS without the need for a special concatenation operator.
<image> - A displayable image in CSS is represented by a <image>, which can be given as an image-set(), <gradient>, url(), or a part of the webpage itself defined by the element() function.
<counter> - In CSS, counters, typically numerical and generated through <counter-reset> and <counter-increment> properties, are represented by the <counter> value and can be displayed using the counter() or counters() method.
- counter() - CSS counter() function, with formats like counter(name) or counter(name, style), displays text with a specified style <list-style-type> (defaulting to decimal) that represents the value of the innermost counter with the given name in a pseudo-element's scope.
- counters() - CSS counters() function, in either counter(name, string) or counter(name, string, style) forms, generates text displaying the value of the innermost counter with the specified name in a pseudo-element, formatted with the provided <list-style-type>, choosing decimal by default.
<quote> - Keywords that vary based on language and position are included in the <quote> data type.

open-quote and close-quote - The matching string defined in the quotes property is used to replace these values.
no-open-quote and no-close-quote - Does not add content but adjusts the nesting level for quotes, either incrementing or decrementing it.

attr(x) - The CSS function attr(x) retrieves an attribute's value from the source or selected element, producing either an empty string or an unparsed string depending on the document language.
alternative text: / <string> | <counter> - Use a forward slash before a text string or counter in <content-list> items for alternative text in browsers supporting it, which is meant for screen readers, but may be disregarded in unsupported browsers, with <string> or <counter> indicating alt text.

Syntax

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

Applies to

All elements, tree-abiding pseudo-elements, and page margin boxes

CSS content - Appending Strings

In the following example, strings are dynamically appended to the content of list items based on their assigned classes.

<html>
<head>
<style>
   .featured::before {
      content: "Top Pick: ";
      font-weight: bold;
      color: #4CAF50;
   }
   .course-item {
      position: relative;
   }
   .course-item::after {
      content: " Enroll Now!";
      position: absolute;
      bottom: 0;
      right: 0;
      font-style: italic;
      color: #1565c0;
   }
</style>
</head>
<body>
<h2>Featured Online Courses</h2>
<ul>
   <li class="featured">Web Development Bootcamp</li>
   <li class="course-item">Data Science Essentials</li>
   <li>Graphic Design Mastery</li>
   <li class="course-item">Digital Marketing Fundamentals</li>
</ul>
</body>
</html>

CSS content - Quotes

In the following example, the quote text is neatly framed by contrasting colored quote marks, which increases its visual effect.

The usage of bigger red quote marks with a light gray backdrop to contrast with green text for quotations.
The type of quotes generated depends on the language and can be turned off by setting the content property values to no-open-quote and no-close-quote, or both to none, or by setting the quotes property to none.

<html>
<head>
  <style>
   q {
      color: #008000;
   }
   q::before,
   q::after {
      font-size: larger;
      color: #800000;
      background: #f0f0f0;
   }
   q::before {
      content: open-quote;
   }
   q::after {
      content: close-quote;
   }
</style>
</head>
<body>
<h1>Welcome to the Wisdom Corner</h1>
<p>Albert Einstein once said, <q cite="https://www.brainyquote.com/quotes/albert_einstein_133991"> The only source of knowledge is experience.</q> Let's embrace our experiences and learn from them to gain wisdom.</p>
<p lang="de-de"> In einem berühmten Zitat sagte Johann Wolfgang von Goethe, <q lang="de-de"> Man sieht nur das, was man weiß. </q>. This reminds us that knowledge shapes our perception.</p>
<p>As we navigate the vast sea of information on the internet,<q> It's crucial to distinguish between knowledge and misinformation.</q> Let's be discerning in our digital journeys.</p>
<p lang="es-es"> En palabras de Pablo Picasso, <q lang="es-es"> La inspiración existe, pero tiene que encontrarte trabajando. </q>. True creativity often comes from the dedication to our craft.</p>
<footer><p>Stay curious and keep exploring the depths of knowledge!</p></footer>
</body>
</html>

CSS content - Add Text to List Item Counters

The following example uses a counter sandwiched between two <strings>s to create a detailed marker for list items within.
In this example, a detailed marker for list items within unordered lists is created by placing a counter between two <strings>.
Every item in the content has a prefix, a space, :, a colon, and another space. In most browsers, the counters() method defines a numeric items counter that is separated by a period.

<html>
<head>
<style>
   div {
      background-color: #f0f0f0;
      padding: 10px;
      margin: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
   }
   h2 {
      color: #008080;
   }
   ol {
      counter-reset: chapters;
      margin-left: 4em;
   }
   li {
      counter-increment: chapters;
   }
   li::marker {
      content: "Chapter " counters(chapters, ".", decimal-leading-zero) ": ";
      color: #800000;
      font-weight: bold;
   }
</style>
</head>
<body>
<div>
<h2>Contents</h2>
<ol>
   <li>Introduction</li>
   <li>Part I: The Adventure Starts
      <ol>
         <li>Setting the Scene.</li>
         <li>Getting to know the Characters.</li>
         <li>Revealing Secrets.</li>
      </ol>
   </li>
   <li>Part II: Difficulties Are Ahead.
      <ol>
         <li>Taking On Opponents.</li>
         <li>Getting around in the Dark.</li>
         <li>Gathering Supporters.</li>
      </ol>
   </li>
   <li>Conclusion</li>
</ol>
</div>
</body>
</html>

CSS content - String with Attribute Values

The following example uses an attribute selector to target secure links and is designed for print stylesheets.
Using the ::after pseudo-element, it appends the value of the href property after the link content.
The content that is generated displays as URL: [href value] surrounded by parenthesis, which improves the way secure links are presented in a format that is suitable for printing.

<html>
<head>
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f8f8f8;
      color: #333;
      margin: 0;
      padding: 0;
   }
   header {
      background-color: #2c3e50;
      color: #ecf0f1;
      padding: 1em;
      text-align: center;
   }
   ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
   }
   li {
      margin: 0.5em 0;
   }
   a {
      text-decoration: none;
      color: #3498db;
      font-weight: bold;
   }
   a:hover {
      color: #e74c3c;
   }
   a[href^="https://"]::after {
      content: " (Explore: " attr(href) ")";
      color: #27ae60;
      font-style: italic;
      font-size: 0.8em;
      margin-left: 0.5em;
   }
</style>
</head>
<body>
<header>
<h1>Web Adventures</h1>
</header>
<nav>
<ul>
   <li><a href="https://tutorialspoint.com/bootstrap/">Bootstrap</a></li>
   <li><a href="https://www.tutorialspoint.com/html">HTML</a></li>
   <li><a href="hhttps://www.tutorialspoint.com/css">CSS</a></li>
   <li><a href="https://www.tutorialspoint.com/javascript">Javascript</a></li>
</ul>
</nav>
</body>
</html>

CSS custom - Adding an Image with Alternative Text

In the following example, the a::before pseudo-element is used to insert an image before the link text.

For browsers that do not enable image rendering, it contains alternate text and fallback material in the form of a placeholder picture.

<html>
<head>
<style>
   a::before {
      /* Fallback content */
      content: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg")
         " - alt text is not supported - ";
      /* Content with alternative text */
      content: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg") /
         " VISIT EXAMPLE: ";
      font: italic small-caps 25px/2.5 'Georgia', serif;
      margin-right: 10px; 
   }
</style>
</head>
<body>
  <a href="https://www.tutorialspoint.com/"> Explore Example Website</a>
</body>
</html>

CSS content - Element Replacement with url()

In the example given, the content: url() CSS property is used to dynamically replace the content of the #custom-replacement element with an image supplied by the URL "content.png". In addition, if the element replacement is not allowed, a fallback is provided by the span::after selector, which shows the element's ID property in parenthesis.

<html>
<head>
<style>
   #custom-replacement {
      height: 300px;
      width: 300px;
      content: url("images/content.png");
   }
   /* Fallback content in case element replacement is supported */
   span::after {
      content: " (ID: " attr(id) ")";
      color: #888;
   }
</style>
</head>
<body>
  <span id="custom-replacement">This content is replaced!</span>
</body>
</html>

CSS content - Element Replacement with <gradient>

In the following example, the content of an element is replaced by a CSS gradient—more precisely, a linear-gradient().

For browsers that enable both element content replacement and alt text, the @supports rule is used to provide alternate text support and introduce a repeating-linear-gradient().

<html>
<head>
<style>
   .container {
      border: 2px solid #e74c3c;
      background-color: #f9e79f;
      min-height: 200px; 
      min-width: 200px; 
      padding: 20px; 
   }
   #altered {
      content: linear-gradient(#3498db, #2ecc71);
   }
   @supports (content: linear-gradient(#000, #fff) / "custom content") {
      #altered {
         content: repeating-linear-gradient(rgba(52, 152, 219, 0.8) 0, #e67e22 20%) /
         "Transformed styling with custom content";
      }
   }
</style>
</head>
<body>
<div class="container" id="altered">Click Here</div>
</body>
</html>