Before, After and Other Pseudo-Elements

What Is It?

Pseudo-elements style a part of an element or generate decorative content around it. They use a double colon.

Properties, Tags and Attributes Explained

• ::before / ::after: Generate content before or after an element content; typically need content.
• ::first-letter: Styles the first letter of an eligible block.
• ::marker: Styles the marker of a list item.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Decorative accent

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Before, After and Other Pseudo-Elements</title>
  <style>
    .label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #15803d; margin-right: 8px; }
  </style>
</head>
<body>
  <p class="label">Available for study</p>
</body>
</html>

What you see: A green decorative dot appears before the status text.

Example 2: List markers

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Before, After and Other Pseudo-Elements</title>
  <style>
    li::marker { color: #7c3aed; font-size: 1.4em; }
    li { padding: 4px; }
  </style>
</head>
<body>
  <ul><li>Read the definition</li><li>Edit the example</li><li>Build something small</li></ul>
</body>
</html>

What you see: Only the bullet markers become larger and purple.

When and Where to Use It

Use pseudo-elements for decoration without extra markup, such as accents, separators, or custom markers.

Common Mistake or Useful Tip

Keep essential information in HTML. Generated content should not be the only source of a label or message.

Try It Yourself

Make the dot square by removing its border-radius.