❮ Previous Next ❯

CSS Pseudo-elements

  • Learn CSS pseudo-elements to style specific parts of elements like before, after, first letter, and first line.

  • What Are CSS Pseudo-elements ?

    CSS pseudo-elements allow you to style specific parts of an element, instead of styling the entire element.

    In simple words:

    Pseudo-elements let you design a “piece” of an element.

    They are written using double colons :: (modern and recommended syntax).

    They do not add real HTML elements - they create virtual styling hooks.

    Pseudo-elements vs Pseudo-classes (Quick Recall)

    Pseudo-elementsPseudo-classes
    Style part of an elementStyle an element’s state
    Use ::Use :
    Create virtual contentReact to interaction
    Decorative / structuralBehavioral

    Why CSS Pseudo-elements Are Important

    Without pseudo-elements:

    Extra HTML tags needed
    Less control over text details
    Messy markup

    With pseudo-elements:

    Cleaner HTML
    Advanced visual styling
    Decorative effects without extra elements

    Real-life comparison:
    Highlighting the first letter of a paragraph in a magazine.

    Commonly Used Pseudo-elements

    In this lesson, we focus on:

    ::first-letter

    ::before

    ::after

    ::first-letter - Style the First Letter

    What it does:

    Styles only the first letter of text inside an element.

::first-letter Pseudo-Element

::first-letter targets and styles only the first letter of text inside an element, commonly used for drop-cap effects. 

<!DOCTYPE html>
<html>
<head>
    <title>::first-letter Example</title>
    <style>
        p::first-letter {
            font-size: 40px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with styled first letter.</p>
</body>
</html>

  • First letter becomes large and bold
    Paragraph looks elegant and editorial

    Real-life comparison:
    Drop caps used in books and newspapers.

    • Works mainly on block-level elements
    • Best for articles, blogs, long-form content

    ::before - Insert Content Before an Element

    What it does:

    Creates virtual content before the element’s actual content.

    Requires the content property - without it, nothing appears.

::before Pseudo-Element

::before inserts virtual content before an element’s actual content and requires the content property to display anything. 

<!DOCTYPE html>
<html>
<head>
    <title>::before Example</title>
    <style>
        h2::before {
            content: "★ ";
            color: gold;
        }
    </style>
</head>
<body>
    <h2>Featured Article</h2>
</body>
</html>

  • Decorative star appears before heading
    No extra HTML required

    Real-life comparison:
    Icons or labels placed before titles.

    ::after - Insert Content After an Element

    What it does:

    Creates virtual content after the element’s content.

::after Pseudo-Element

::after inserts virtual content after an element’s actual content and requires the content property to display it. 

<!DOCTYPE html>
<html>
<head>
    <title>::after Example</title>
    <style>
        h2::after {
            content: " ✔";
            color: green;
        }
    </style>
</head>
<body>
    <h2>Completed Task</h2>
</body>
</html>

  • Checkmark appears after the text

    Real-life comparison:
    Tick marks shown after finished work.

    Styling ::before & ::after

    Pseudo-elements can be styled just like normal elements.

Styling ::before and ::after

::before and ::after can be styled like normal elements using properties such as width, height, background, and display. 

.box::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-color: blue;
}
  • Creates decorative shapes
    Useful for lines, badges, ribbons, overlays

Card with Decorative Accent (::before)

This example uses ::before to add a decorative top bar to a card without adding extra HTML. 

<!DOCTYPE html>
<html>
<head>
    <title>Decorative Card Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .card {
            border: 2px solid #333;
            padding: 20px;
            position: relative;
            width: 250px;
        }

        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="card">
        <h3>Premium Plan</h3>
        <p>Best for professionals.</p>
    </div>
</body>
</html>

  • Decorative top bar
    Clean, semantic HTML
    Modern UI feel

    Using ::after for Clearfix (Recall)

Using ::after for Clearfix

::after is used in the clearfix technique to clear floated elements and prevent parent collapse. 

.container::after {
  content: "";
  display: block;
  clear: both;
}

  • Fixes float-related layout issues
    No extra markup needed

    Common Mistakes

    Forgetting the content property
    Using single : instead of ::
    Expecting pseudo-elements to appear in the DOM
    Using them for critical content

    Fixes float-related layout issues
    No extra markup needed

    Common Mistakes

    Forgetting the content property
    Using single : instead of ::
    Expecting pseudo-elements to appear in the DOM
    Using them for critical content

    Best Practices for Pseudo-elements

    Use them for decoration, not essential content
    Always define content
    Keep HTML clean and semantic
    Prefer modern :: syntax
    Use for visual enhancements only

    ::first-letter → magazine-style text
    ::before → decoration before
    ::after → decoration after
    Cleaner HTML + richer UI

    Pseudo-elements style parts of elements
    No extra HTML is required
    ::first-letter, ::before, ::after are most used
    Essential for modern UI design
    Very important interview topic

❮ Previous Next ❯