CSS content Property

Definition and Usage

The content property inserts generated content — usually on ::before and ::after. You can add a string, pull an attribute with attr(), show a counter, or use quote keywords.

The initial value is normal (on ::before / ::after that means nothing is generated). It is not inherited. Use it for decoration and labels you could live without if CSS failed — keep essential meaning in HTML.

CSS Syntax

Study starters: content: " New!"; · content: attr(data-label); · content: none;

Property Values

How to Use content

Target a pseudo-element, then say what it should show.

1. Pick an element and attach ::before or ::after.
2. Set content to a string, attr(…), counter(…), or a quote keyword.
3. Style the pseudo-element with color, margin, or font if needed.
4. Keep meaning in HTML — use generated text for optional decoration.

Live Preview

The label uses ::before. Only its content value changes.

CSS Examples

Each snippet focuses on content with ::before or ::after. Use Try It Yourself for a live editor.

<style>
  .new::after {
    content: " New!";
    color: #b91c1c;
  }
</style>

<p class="new">Halloween Stories</p>

<style>
  p::before {
    content: attr(data-label) ": ";
    font-weight: bold;
  }
</style>

<p data-label="Tip">Save often while you code.</p>

<style>
  ol {
    counter-reset: step;
    list-style: none;
  }

  li {
    counter-increment: step;
  }

  li::before {
    content: counter(step) ". ";
  }
</style>

<ol>
  <li>Learn content</li>
  <li>Try attr()</li>
  <li>Add counters</li>
</ol>

Key Takeaways