CSS Pseudo-elements

What are Pseudo-elements?

CSS **pseudo-elements** are keywords added to selectors that allow you to style specific parts of an element's content, or insert content that isn't explicitly in the HTML. They essentially create "virtual" elements within the document tree that can be styled.

A pseudo-element starts with a double colon (::). While a single colon (:) was historically used for pseudo-elements (and still works for older ones for backward compatibility), the double colon is the modern and recommended syntax to differentiate them from pseudo-classes.

💡 Key Distinction

**Pseudo-classes** style an element based on its *state* or *position* (e.g., :hover, :first-child). **Pseudo-elements** style a *part* of an element or insert *generated content* (e.g., ::first-line, ::before).

Common Pseudo-elements

`::before` and `::after`

These are two of the most powerful and commonly used pseudo-elements. They allow you to insert content (via the content property) before or after the actual content of an element. This generated content is part of the styling, not part of the HTML document itself.

h2::before {
    content: "» "; /* Inserts a right-arrow character */
    color: var(--primary-color);
    font-weight: bold;
}

a::after {
    content: " →"; /* Adds an arrow after links */
    font-size: 0.8em;
    vertical-align: super;
    opacity: 0.7;
}

Example Usage:

Using ::before for decorative elements or icons, and ::after for clearfixes or external link indicators.

`::first-line`

Selects the first line of a block-level element. The length of the first line depends on the width of the element and the font size.

p::first-line {
    font-variant: small-caps;
    color: var(--primary-color);
}

`::first-letter`

Selects the first letter of the first line of a block-level element. Often used for "drop caps" or initial letter styling.

p::first-letter {
    font-size: 2.5em;
    font-weight: bold;
    float: left;
    margin-right: 0.1em;
    color: var(--secondary-color);
}

`::selection`

Applies styles to the portion of an element that is highlighted by the user (e.g., text selected with the mouse).

::selection {
    background: var(--accent-color);
    color: white;
}

`::placeholder`

Styles the placeholder text of form input fields (<input> and <textarea>).

input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

`::marker`

Styles the marker box of a list item, typically a bullet or number in <li> elements.

li::marker {
    color: var(--success-color);
    font-size: 1.2em;
}

Practical Uses of Pseudo-elements

**Adding decorative content**: Icons, arrows, quotation marks, or other visual cues that don't need to be in the HTML.
**Clearfixes**: Using ::after with clear: both; display: table; to contain floats within a parent element.
**Styling specific text parts**: Applying unique styles to the first letter or line of a paragraph for typographic effect.
**Customizing form elements**: Styling placeholders, or scrollbars (though scrollbar pseudo-elements are non-standard and browser-specific).
**Highlighting user selections**: Changing the background and text color of selected content.

What are Pseudo-elements?

💡 Key Distinction

Common Pseudo-elements

::before and ::after

::first-line

::first-letter

::selection

::placeholder