CSS Generated Content Tutorial

Introduction

CSS is usually used to style HTML elements.

For example:

1p {2  color: #333333;3}

This changes how paragraphs look.

CSS can also create small pieces of generated content.

Generated content is content added by CSS rather than written directly in the HTML.

For example:

1.note::before {2  content: “Note: “;3  font-weight: bold;4}

HTML:

1<p class=”note”>Save your CSS file before refreshing the browser.</p>

The browser displays something like:

1Note: Save your CSS file before refreshing the browser.

The word Note: is generated by CSS.

Generated content is usually created with the content property and the ::before and ::after pseudo-elements.

It is useful for decorative or supporting content, such as icons, labels, arrows, separators, badges, and small visual cues.

However, generated content should be used carefully.

Important information should usually be written in the HTML, not only added with CSS.

What Is Generated Content?

Generated content is content the browser creates from CSS.

It is not written directly inside the HTML element.

For example:

1<a class=”external-link” href=”https://example.com”>Visit Example</a>

CSS:

1.external-link::after {2  content: ” ↗”;3}

The browser displays an arrow after the link text.

The arrow is not in the HTML.

It is generated by CSS.

Generated content is commonly used with:

1::before2::after3content

The pseudo-element creates a place for the generated content.

The content property defines what appears there.

What Are ::before and ::after?

The ::before and ::after pseudo-elements create generated content before or after an element’s real content.

::before creates content before the element’s content:

1.tip::before {2  content: “Tip: “;3}

::after creates content after the element’s content:

1.external-link::after {2  content: ” ↗”;3}

These pseudo-elements are not normal HTML elements.

They are created by the browser for styling and rendering.

You can often see them in browser developer tools, but they do not appear as actual elements in your HTML source.

The content Property

The content property tells the browser what a generated pseudo-element should contain.

Example:

1.note::before {2  content: “Note: “;3}

The value can be text:

1content: “New”;

It can be an empty string:

1content: “”;

It can also use values such as attributes, counters, or images in more advanced CSS.

For this article, the main focus is simple generated text and decorative generated elements.

The most important rule is:

1::before and ::after usually need content to appear.

content with Text

You can use content to add short text.

Example:

1.warning::before {2  content: “Warning: “;3  font-weight: bold;4}

HTML:

1<p class=”warning”>Check your form before submitting.</p>

The browser displays something like:

1Warning: Check your form before submitting.

This can be useful for repeated labels.

However, if the word Warning is essential to understanding the message, it is usually better to include it in the HTML:

1<p class=”warning”><strong>Warning:</strong> Check your form before submitting.</p>

CSS-generated text is best for supporting or decorative content.

content with an Empty String

An empty string is useful when the pseudo-element is decorative.

Example:

1.card::before {2  content: “”;3  display: block;4  height: 4px;5  background-color: navy;6}

HTML:

1<article class=”card”>2  <h2>CSS Basics</h2>3  <p>Learn how CSS styles web pages.</p>4</article>

The pseudo-element does not contain text.

It creates a decorative line before the card content.

This is a good use of generated content because the line is visual decoration, not meaningful content.

::before Example

The ::before pseudo-element adds generated content before the element’s real content.

HTML:

1<p class=”tip”>Use classes for reusable styles.</p>

CSS:

1.tip::before {2  content: “Tip: “;3  font-weight: bold;4  color: navy;5}

The browser displays:

1Tip: Use classes for reusable styles.

The generated text appears before the real paragraph text.

This can be useful for notes, tips, labels, icons, and decorative markers.

::after Example

The ::after pseudo-element adds generated content after the element’s real content.

HTML:

1<a href=”https://example.com” class=”external-link”>External resource</a>

CSS:

1.external-link::after {2  content: ” ↗”;3}

The browser displays:

1External resource ↗

The generated arrow appears after the link text.

This is useful when adding a small visual cue.

For example, it can suggest that the link goes to another website or opens in a new tab.

Generated Content Is Usually Inline

By default, generated content from ::before and ::after behaves like inline content.

Example:

1.note::before {2  content: “Note: “;3}

The generated text appears on the same line as the element’s content.

You can change this with display.

Example:

1.card::before {2  content: “”;3  display: block;4  height: 4px;5  background-color: navy;6  margin-bottom: 16px;7}

Now the generated pseudo-element behaves like a block.

That lets it act like a horizontal line or decorative strip.

Styling Generated Content

Generated content can be styled with normal CSS properties.

Example:

1.badge::after {2  content: “New”;3  font-size: 0.75rem;4  font-weight: bold;5  margin-left: 0.5rem;6}

HTML:

1<h2 class=”badge”>CSS Selectors</h2>

This adds a small New label after the heading.

Generated content can use properties such as:

1color2font-size3font-weight4background-color5display6width7height8margin9padding10border11border-radius12position

This makes pseudo-elements very flexible.

Decorative Icons with Generated Content

Generated content is often used for small decorative icons.

Example:

1.success::before {2  content: “✓ “;3  color: green;4  font-weight: bold;5}

HTML:

1<p class=”success”>Your settings were saved.</p>

The check mark is added with CSS.

This is fine if the icon is decorative or reinforces information already present in the text.

However, if the icon is the only thing that communicates success, the meaning may not be available to all users.

A safer HTML version would include meaningful text:

1<p class=”success”><strong>Success:</strong> Your settings were saved.</p>

Use generated icons as support, not as the only source of meaning.

Adding Arrows to Links

A common use of ::after is adding arrows to links.

HTML:

1<a class=”read-more” href=”article.html”>Read more</a>

CSS:

1.read-more::after {2  content: ” →”;3}

The browser displays:

1Read more →

This arrow is decorative.

It supports the idea that the link continues to another page.

This is usually an appropriate use of generated content.

Adding External Link Cues

You can combine attribute selectors with generated content.

HTML:

1<a href=”https://example.com” target=”_blank”>Visit Example</a>

CSS:

1a[target=”_blank”]::after {2  content: ” ↗”;3}

This adds an arrow to links that open in a new tab.

The selector means:

1select links with target=”_blank”2then add generated content after them

This gives users a visual cue that the link behaves differently.

For important behavioural information, also consider making the link text or surrounding text clear.

Decorative Lines with ::before

You can create decorative lines without extra HTML.

HTML:

1<h2 class=”section-title”>Featured Lessons</h2>

CSS:

1.section-title::before {2  content: “”;3  display: inline-block;4  width: 32px;5  height: 4px;6  background-color: navy;7  margin-right: 8px;8  vertical-align: middle;9}

This adds a line before the heading text.

The line is presentational.

It does not need to be in the HTML.

This keeps the HTML cleaner and leaves the visual styling to CSS.

Decorative Lines with ::after

You can also place decorative lines after elements.

HTML:

1<h2 class=”section-heading”>CSS Tutorials</h2>

CSS:

1.section-heading::after {2  content: “”;3  display: block;4  width: 80px;5  height: 4px;6  background-color: navy;7  margin-top: 12px;8}

This creates a line below the heading.

This pattern is common in headings, cards, hero sections, and callout blocks.

No extra <div> or <span> is required because the line is decorative.

Generated Badges

You can use ::after for simple badges.

HTML:

1<h2 class=”lesson-title is-new”>CSS Selectors</h2>

CSS:

1.lesson-title.is-new::after {2  content: “New”;3  display: inline-block;4  font-size: 0.75rem;5  font-weight: bold;6  margin-left: 0.5rem;7  padding: 0.15rem 0.4rem;8  border-radius: 999px;9}

This creates a small New badge after the lesson title.

However, ask whether New is important content.

If it is important for users, you may prefer:

1<h2>2  CSS Selectors3  <span class=”badge”>New</span>4</h2>

Generated badges are best when they are visual enhancement rather than essential content.

Using Attribute Values with attr()

The content property can display an attribute value with attr().

Example:

1<a href=”https://example.com”>Visit Example</a>

CSS:

1a::after {2  content: ” (” attr(href) “)”;3}

The browser may display:

1Visit Example (https://example.com)

This can be useful in print styles or debugging.

For normal screen design, be careful.

Displaying full URLs after every link may make the page cluttered.

attr() Example for Print Styles

Generated content can be useful in print stylesheets.

For example, when someone prints a page, links may no longer be clickable.

You can show the URL after each link:

1@media print {2  a[href]::after {3    content: ” (” attr(href) “)”;4  }5}

This means printed pages can show where links point.

This is a useful case because the generated content supports the printed format.

It does not replace the original link text.

Supporting Content vs Essential Content

Generated content is best used for decorative or supporting information.

Good examples include:

1arrows after links2decorative lines3small icons4visual separators5non-essential badges6print URL hints7repeated visual markers

Generated content should usually not be the only source of important information.

Avoid relying only on CSS for:

1button labels2form instructions3required field information4prices5warnings6error messages7legal text8important status labels

If users need the information to understand or use the page, put it in the HTML.

Generated Content and Accessibility

Generated content can be handled inconsistently depending on browser, assistive technology, and user settings.

Some generated text may be announced by some assistive technologies.

Some may not.

This is one reason essential content should live in HTML.

For example, this is risky:

1.error::before {2  content: “Error: “;3}

Better:

1<p class=”error”><strong>Error:</strong> Please enter your email address.</p>

The CSS can still style the label, but the meaning is present in the document.

Use generated content for presentation and enhancement.

Do not rely on it as the only source of meaning.

Generated Content and Copying Text

Generated content may not behave like normal text when users copy content from a page.

For example:

1.note::before {2  content: “Note: “;3}

A user copying the paragraph text may or may not get the generated Note: text, depending on the browser and context.

If that text matters, it belongs in the HTML.

This is another reason to keep generated content decorative or supportive.

Generated Content and Translation

Generated content written in CSS may not be handled in the same way as normal HTML text in translation workflows.

Example:

1.button::after {2  content: ” Continue”;3}

If the site is translated, this CSS-generated text may be missed.

Important visible words should usually be in HTML or managed through a proper content system.

Generated content is better for symbols, decoration, and minor repeated visual cues.

Using Generated Content for Separators

Generated content can create separators between inline items.

HTML:

1<nav class=”breadcrumb”>2  <a href=”index.html”>Home</a>3  <a href=”lessons.html”>Lessons</a>4  <a href=”css.html”>CSS</a>5</nav>

CSS:

1.breadcrumb a + a::before {2  content: ” / “;3  color: #666666;4}

This adds a slash before every breadcrumb link except the first one.

The selector uses:

1a + a

to select links that immediately follow another link.

Then ::before adds the separator.

This avoids writing separator characters manually in the HTML.

Using Generated Content for Required Markers

You can use generated content to add a required marker.

HTML:

1<label class=”required” for=”email”>Email address</label>2<input type=”email” id=”email” required>

CSS:

1.required::after {2  content: ” *”;3  color: red;4}

This adds an asterisk after the label.

However, the form should still communicate required fields clearly.

The required attribute is important for the form control:

1<input type=”email” id=”email” required>

And if the asterisk needs explanation, include that explanation in the HTML:

1<p>* Required field</p>

Generated markers can support clarity, but they should not be the only form instruction.

Using ::before and ::after Together

An element can have both ::before and ::after.

HTML:

1<h2 class=”fancy-heading”>CSS Generated Content</h2>

CSS:

1.fancy-heading::before {2  content: “”;3  display: inline-block;4  width: 24px;5  height: 3px;6  background-color: navy;7  margin-right: 8px;8}9 10.fancy-heading::after {11  content: “”;12  display: inline-block;13  width: 24px;14  height: 3px;15  background-color: navy;16  margin-left: 8px;17}

This creates decorative lines before and after the heading.

Because the lines are decorative, pseudo-elements are appropriate.

Positioning Generated Content

Generated content can be positioned with CSS.

HTML:

1<article class=”card”>2  <h2>Featured Lesson</h2>3  <p>Learn how generated content works.</p>4</article>

CSS:

1.card {2  position: relative;3  padding: 24px;4  border: 1px solid #dddddd;5}6 7.card::after {8  content: “”;9  position: absolute;10  top: 12px;11  right: 12px;12  width: 12px;13  height: 12px;14  border-radius: 50%;15  background-color: navy;16}

This places a decorative dot in the top-right corner of the card.

The card uses position: relative.

The pseudo-element uses position: absolute.

That makes the dot position itself relative to the card.

Generated Content as Shapes

Generated content does not need to be text.

With content: "", you can create shapes.

Example:

1.divider::after {2  content: “”;3  display: block;4  width: 100%;5  height: 1px;6  background-color: #dddddd;7  margin-top: 16px;8}

HTML:

1<h2 class=”divider”>Section Title</h2>

This creates a horizontal rule-like decoration after the heading.

This is useful when the line is part of the design rather than document structure.

If the line represents a meaningful thematic break, an HTML <hr> element may be more appropriate.

Generated Content with Counters

CSS can also generate numbers with counters.

This is more advanced, but it is useful to know.

Example:

1.steps {2  counter-reset: step;3}4 5.steps li::before {6  counter-increment: step;7  content: counter(step) “. “;8  font-weight: bold;9}

HTML:

1<ol class=”steps”>2  <li>Create the HTML.</li>3  <li>Add the CSS.</li>4  <li>Test the page.</li>5</ol>

In many cases, normal ordered lists already provide numbering:

1<ol>2  <li>Create the HTML.</li>3  <li>Add the CSS.</li>4</ol>

Use CSS counters only when you need custom generated numbering.

For normal numbered lists, HTML is simpler and more semantic.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Generated Content Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <h1 class=”page-title”>Generated Content with CSS</h1>12 13    <p class=”note”>14      Generated content is useful for decoration and supporting visual cues.15    </p>16 17    <nav class=”breadcrumb”>18      <a href=”index.html”>Home</a>19      <a href=”lessons.html”>Lessons</a>20      <a href=”css.html”>CSS</a>21    </nav>22 23    <article class=”card”>24      <h2 class=”card-title”>Featured Lesson</h2>25      <p>Learn how to use content, before, and after.</p>26      <a class=”read-more” href=”lesson.html”>Read more</a>27    </article>28 29    <p>30      <a href=”https://example.com” target=”_blank”>External resource</a>31    </p>32  </main>33 34</body>35</html>

CSS:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4}5 6.container {7  width: 90%;8  max-width: 900px;9  margin: 0 auto;10}11 12.page-title::after {13  content: “”;14  display: block;15  width: 80px;16  height: 4px;17  background-color: navy;18  margin-top: 12px;19}20 21.note::before {22  content: “Note: “;23  font-weight: bold;24  color: navy;25}26 27.breadcrumb a + a::before {28  content: ” / “;29  color: #666666;30}31 32.card {33  position: relative;34  padding: 24px;35  border: 1px solid #dddddd;36}37 38.card::before {39  content: “”;40  display: block;41  height: 4px;42  background-color: navy;43  margin-bottom: 16px;44}45 46.card::after {47  content: “”;48  position: absolute;49  top: 12px;50  right: 12px;51  width: 12px;52  height: 12px;53  border-radius: 50%;54  background-color: navy;55}56 57.read-more::after {58  content: ” →”;59}60 61a[target=”_blank”]::after {62  content: ” ↗”;63}

This example uses generated content for a title underline, a note label, breadcrumb separators, card decoration, a read-more arrow, and an external-link cue.

How the Complete Example Works

This rule adds a decorative line after the page title:

1.page-title::after {2  content: “”;3  display: block;4  width: 80px;5  height: 4px;6}

This rule adds a supporting label before the note:

1.note::before {2  content: “Note: “;3}

This rule adds separators between breadcrumb links:

1.breadcrumb a + a::before {2  content: ” / “;3}

This rule adds a decorative strip before the card content:

1.card::before {2  content: “”;3  display: block;4  height: 4px;5}

This rule adds a decorative dot to the card:

1.card::after {2  content: “”;3  position: absolute;4}

This rule adds an arrow after a read-more link:

1.read-more::after {2  content: ” →”;3}

Each generated item supports the visual design without requiring extra decorative HTML.

Common Mistake: Forgetting the content Property

This usually will not display anything:

1.note::before {2  font-weight: bold;3}

This works:

1.note::before {2  content: “Note: “;3  font-weight: bold;4}

For ::before and ::after, remember to include content.

For decorative shapes, use:

1content: “”;

Common Mistake: Putting Essential Text Only in CSS

Less suitable:

1.submit-button::after {2  content: “Submit form”;3}

Better:

1<button class=”submit-button” type=”submit”>Submit form</button>

Important text should be in the HTML.

Generated content is not a reliable replacement for meaningful content.

Common Mistake: Using Generated Content Instead of Semantic HTML

This is less suitable:

1.section-break::after {2  content: “”;3  display: block;4  height: 1px;5}

if the line represents a meaningful break in the content.

Better semantic HTML:

1<hr>

Use CSS decoration for visual styling.

Use HTML elements when the structure has meaning.

Common Mistake: Adding Too Many Decorative Icons

This can become cluttered:

1h2::before {2  content: “★ “;3}4 5a::after {6  content: ” →”;7}8 9p::before {10  content: “• “;11}12 13li::after {14  content: ” ✓”;15}

Generated content should support the design.

Too many symbols can make the page harder to read.

Use decoration deliberately.

Common Mistake: Forgetting That Generated Content Depends on CSS

If CSS fails to load, generated content will not appear.

That is another reason not to use generated content for essential information.

For example, if required field labels are added only with CSS and the stylesheet fails, users may lose that information.

Important instructions, warnings, labels, and content should remain in the HTML.

Common Mistake: Using ::before or ::after on Elements That Cannot Display Them as Expected

Some elements do not handle ::before and ::after in the way you might expect.

For example, replaced elements such as images and some form controls can be limited.

This may not work as expected:

1img::after {2  content: “Caption”;3}

A better approach is to wrap the image in a container or use proper HTML:

1<figure>2  <img src=”photo.jpg” alt=”Example photo”>3  <figcaption>Caption</figcaption>4</figure>

Use pseudo-elements on suitable containers when needed.

Common Mistake: Assuming Generated Content Is Always Announced

Generated text may not be communicated consistently to assistive technologies.

This is risky:

1.error::before {2  content: “Error: “;3}

Better:

1<p class=”error”><strong>Error:</strong> Please enter a valid email address.</p>

If the generated content is meaningful, put it in the HTML.

If it is decorative, generated content is usually fine.

Best Practices

Use generated content for decoration and supporting cues.

Use ::before to add content before an element’s content.

Use ::after to add content after an element’s content.

Always include the content property with ::before and ::after.

Use content: "" for decorative shapes, lines, and layout effects.

Keep important information in HTML.

Use generated arrows, separators, badges, and icons carefully.

Avoid using generated content for form labels, button text, error messages, or legal information.

Use semantic HTML when the content has structural meaning.

Test generated content in the browser.

Use browser developer tools to inspect ::before and ::after.

Summary

Generated content is content created by CSS rather than written directly in HTML.

It is usually created with ::before, ::after, and the content property.

Example:

1.note::before {2  content: “Note: “;3}

::before adds generated content before an element’s real content:

1.tip::before {2  content: “Tip: “;3}

::after adds generated content after an element’s real content:

1.read-more::after {2  content: ” →”;3}

Decorative generated content often uses an empty string:

1.card::after {2  content: “”;3}

The main idea is simple:

1Generated content is useful for decoration and supporting cues, but essential content belongs in HTML.

Used carefully, generated content helps you keep HTML cleaner while adding useful visual details with CSS.