CSS Pseudo-Elements

CSS Pseudo-Elements: Styling Parts of Elements

A pseudo-element is a keyword added to a CSS selector that lets you style a specific part of an element.

While pseudo-classes (:hover, :focus) style an element based on its state, pseudo-elements act as if you've added a brand new HTML element to your page. For example, you can style just the first line of a paragraph, inject decorative content before an element, or style the placeholder text of an input.

Syntax Note: Pseudo-elements are denoted by a double colon (::) to easily distinguish them from pseudo-classes (which use a single colon :). Older browsers supported a single colon for pseudo-elements, but the double colon is the modern standard.

Syntax:

selector::pseudo-element {
    property: value;
}

1. Generated Content Pseudo-Elements

These pseudo-elements are incredibly powerful because they allow you to insert visual elements (like icons, decorative shapes, or text) directly from CSS without bloating your HTML document.

Important: They require the content property to work!

<style>
    .highlight {
        font-size: 20px;
        font-weight: bold;
        color: navy;
    }
    .highlight::before {
        content: "✨ ";
    }
    .highlight::after {
        content: " 🔥";
    }
</style>

<p class="highlight">Generated content!</p>

2. Typography Pseudo-Elements

These are used to create editorial, magazine-style typography effects without needing extra <span> tags wrapped around your text in HTML.

<style>
    .article { max-width: 400px; }
    .article::first-letter {
        font-size: 3em;
        color: navy;
        float: left;
    }
    .article::first-line {
        font-weight: bold;
        text-transform: uppercase;
    }
</style>

<p class="article">
    Once upon a time, CSS was just used for basic colors and fonts. Today, it has evolved into a powerful styling language.
</p>

3. UI and Interaction Pseudo-Elements

These pseudo-elements target parts of the user interface that are otherwise difficult or impossible to style using standard element selectors.

<style>
    ::selection { background: navy; color: white; }
    input::placeholder { color: lightcoral; font-style: italic; }
    li::marker { color: navy; font-size: 1.5em; }
</style>

<p>Highlight this text!</p>
<input type="text" placeholder="Type here...">
<ul>
    <li>Custom marker</li>
</ul>

4. Specific Context Pseudo-Elements

CSS continues to evolve, providing developers with pseudo-elements to style highly specific parts of complex HTML tags.

::backdrop

Styles the backdrop (the dark overlay behind) of modal elements like the <dialog> tag. It helps to bring focus to the modal by dimming the rest of the screen.

::file-selector-button

For years, it was notoriously difficult to style the default "Choose File" button on an <input type="file">. This pseudo-element finally allows you to easily style that specific inner button.

<style>
    ::file-selector-button {
        background: navy; color: white;
        padding: 10px; border: none;
        border-radius: 5px; cursor: pointer;
    }
    dialog::backdrop {
        background: rgba(0, 0, 128, 0.5);
        backdrop-filter: blur(3px);
    }
</style>

<input type="file">
<button onclick="myDialog.showModal()">Open Modal</button>
<dialog id="myDialog">
    <p>This is a dialog with a backdrop.</p>
    <button onclick="myDialog.close()">Close</button>
</dialog>

::spelling-error (Experimental)

The ::spelling-error pseudo-element styles text that has been flagged as a spelling error by the browser's built-in spell-checker.

(Note: Support for this feature is currently limited across modern browsers).

::spelling-error {
    background-color: #ffdddd;
    text-decoration: underline wavy red;
}

Summary

• Pseudo-classes (:) define the state of an element (like hovering or being the first child).
• Pseudo-elements (::) allow you to style a specific part of an element (like the first line of text or an injected before/after block).
• Always use the double colon <code style="color: maroon;">::</code> for pseudo-elements to adhere to modern CSS3 standards.