CSS · Advanced CSS

Generated Content

Add decorative elements and dynamic content with ::before and ::after pseudo-elements

Find videos you like?

Save to resource drawer for future reference!

CSS Generated Content

::before and ::after pseudo-elements

Generated Content = Pure CSS Magic! ✨

Use ::before and ::after pseudo-elements to insert content before or after an element without touching HTML. Perfect for decorative elements, icons, tooltips, and dynamic content!

Why Use Generated Content?

✨ Decorative

Add visual elements without extra HTML

🎯 Dynamic

Display attributes or counter values

🧹 Clean

Keep markup semantic and minimal

✨

🎨

Pseudo-elements in Action

Add content without touching HTML

::before

Before Content

Inserts before element

::after

After Content

Inserts after element

No HTML changes needed!

Generated Content Example

/* ✨ Add content with ::before */

.quote::before

{

content: '"';

font-size: 3rem;

}

/* 🎯 Add content with ::after */

.badge::after

{

content: ' ✓';

}

Basic ::before and ::after

Add content before or after elements

Basic Generated Content Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Generated Content Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>✨ Generated Content</h1>
      <p class="subtitle">Add visual elements with CSS pseudo-elements</p>
      <div class="badge">Premium Feature</div>
      <div class="quote">
        CSS generated content allows you to add decorative elements without cluttering your HTML.
      </div>
      <div class="card">
        <h3>Featured Content</h3>
        <p>This card has a rotating star added with ::before pseudo-element.</p>
      </div>
      <p style="color: #64748b; text-align: center;">
        Learn more at our <a href="#" class="link">documentation page</a>
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

✨ How It Works

::before

Inserts content BEFORE the element's content

::after

Inserts content AFTER the element's content

content property

Required to display anything - even empty ""

Advanced Techniques

Tooltips, effects, and dynamic content with attr()

Advanced Generated Content Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Generated Content</title>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Advanced Generated Content</h1>
      <div class="demo-section">
        <h3>Interactive Tooltips</h3>
        <p>
          Hover over <span class="tooltip" data-tooltip="This is helpful information">this text</span>
          to see a tooltip created with ::before and ::after pseudo-elements.
        </p>
      </div>
      <div class="demo-section">
        <h3>Fancy Button</h3>
        <a href="#" class="btn"><span>Click Me</span></a>
        <p style="margin-top: 1rem; font-size: 0.875rem;">Hover to see the ripple effect created with ::before</p>
      </div>
      <div class="demo-section">
        <h3>Form with Required Fields</h3>
        <div class="form-group">
          <label class="form-label required">Email Address</label>
          <input type="email" class="form-input" placeholder="your@email.com">
        </div>
        <div class="form-group">
          <label class="form-label required">Password</label>
          <input type="password" class="form-input" placeholder="Enter password">
        </div>
      </div>
      <div class="demo-section">
        <h3>Status Indicators</h3>
        <div>
          <span class="status success">Success</span>
          <span class="status warning">Warning</span>
          <span class="status error">Error</span>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

🎯 Advanced Uses

attr()

Display HTML attribute values dynamically

Tooltips

Created with positioning and transitions

Visual FX

Ripples, glows, and animations

Content Property Reference

All values you can use with the content property

content: "text";String

Insert plain text

content: attr(data-label);Dynamic

Display HTML attribute value

content: counter(name);Counter

Display counter value

content: url(icon.svg);Image

Insert image or SVG

content: "";Empty

Empty content (for decorative elements)

content: "★" " " attr(rating);Combined

Combine multiple values with spaces

Remember 💡

Keep it decorative - Don't add essential content

Accessibility matters - Screen readers may not read generated content

Perfect for icons - Visual indicators without HTML

content: "" required even for empty pseudo-elements

Browser Support

Universal browser support! The ::before and ::after pseudo-elements have been supported in all major browsers for many years, including IE8+ (with single colon syntax :before/:after). They're a reliable feature for production use.

Previous Topic

Counters

counter-reset, counter-increment, counter(), counters(), and automatic numbering.

Next Topic

Subgrid

grid-template-columns/rows: subgrid, inheriting grid tracks, and nested grids.

Ask a Question

Have a question about Generated Content? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Advanced CSS

Generated Content

Add decorative elements and dynamic content with ::before and ::after pseudo-elements

Find videos you like?

Save to resource drawer for future reference!

CSS Generated Content

::before and ::after pseudo-elements

Generated Content = Pure CSS Magic! ✨

Why Use Generated Content?

✨ Decorative

Add visual elements without extra HTML

🎯 Dynamic

Display attributes or counter values

🧹 Clean

Keep markup semantic and minimal

✨

🎨

Pseudo-elements in Action

Add content without touching HTML

::before

Before Content

Inserts before element

::after

After Content

Inserts after element

No HTML changes needed!

Generated Content Example

/* ✨ Add content with ::before */

.quote::before

{

content: '"';

font-size: 3rem;

}

/* 🎯 Add content with ::after */

.badge::after

{

content: ' ✓';

}

Basic ::before and ::after

Add content before or after elements

Basic Generated Content Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Generated Content Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>✨ Generated Content</h1>
      <p class="subtitle">Add visual elements with CSS pseudo-elements</p>
      <div class="badge">Premium Feature</div>
      <div class="quote">
        CSS generated content allows you to add decorative elements without cluttering your HTML.
      </div>
      <div class="card">
        <h3>Featured Content</h3>
        <p>This card has a rotating star added with ::before pseudo-element.</p>
      </div>
      <p style="color: #64748b; text-align: center;">
        Learn more at our <a href="#" class="link">documentation page</a>
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

✨ How It Works

::before

Inserts content BEFORE the element's content

::after

Inserts content AFTER the element's content

content property

Required to display anything - even empty ""

Advanced Techniques

Tooltips, effects, and dynamic content with attr()

Advanced Generated Content Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Generated Content</title>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Advanced Generated Content</h1>
      <div class="demo-section">
        <h3>Interactive Tooltips</h3>
        <p>
          Hover over <span class="tooltip" data-tooltip="This is helpful information">this text</span>
          to see a tooltip created with ::before and ::after pseudo-elements.
        </p>
      </div>
      <div class="demo-section">
        <h3>Fancy Button</h3>
        <a href="#" class="btn"><span>Click Me</span></a>
        <p style="margin-top: 1rem; font-size: 0.875rem;">Hover to see the ripple effect created with ::before</p>
      </div>
      <div class="demo-section">
        <h3>Form with Required Fields</h3>
        <div class="form-group">
          <label class="form-label required">Email Address</label>
          <input type="email" class="form-input" placeholder="your@email.com">
        </div>
        <div class="form-group">
          <label class="form-label required">Password</label>
          <input type="password" class="form-input" placeholder="Enter password">
        </div>
      </div>
      <div class="demo-section">
        <h3>Status Indicators</h3>
        <div>
          <span class="status success">Success</span>
          <span class="status warning">Warning</span>
          <span class="status error">Error</span>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

🎯 Advanced Uses

attr()

Display HTML attribute values dynamically

Tooltips

Created with positioning and transitions

Visual FX

Ripples, glows, and animations

Content Property Reference

All values you can use with the content property

content: "text";String

Insert plain text

content: attr(data-label);Dynamic

Display HTML attribute value

content: counter(name);Counter

Display counter value

content: url(icon.svg);Image

Insert image or SVG

content: "";Empty

Empty content (for decorative elements)

content: "★" " " attr(rating);Combined

Combine multiple values with spaces

Remember 💡

Keep it decorative - Don't add essential content

Accessibility matters - Screen readers may not read generated content

Perfect for icons - Visual indicators without HTML

content: "" required even for empty pseudo-elements

Browser Support

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Counters

Subgrid

Building Your Learning Module...

Generated Content

Generated Content = Pure CSS Magic! ✨

Why Use Generated Content?

✨ Decorative

🎯 Dynamic

🧹 Clean

Pseudo-elements in Action

Basic Generated Content Demo

✨ How It Works

Advanced Generated Content Examples

🎯 Advanced Uses

attr()

Tooltips

Visual FX

Remember 💡

Browser Support

Counters

Subgrid

Generated Content

Generated Content = Pure CSS Magic! ✨

Why Use Generated Content?

✨ Decorative

🎯 Dynamic

🧹 Clean

Pseudo-elements in Action

Basic Generated Content Demo

✨ How It Works

Advanced Generated Content Examples

🎯 Advanced Uses

attr()

Tooltips

Visual FX

Remember 💡

Browser Support