CSS Pseudo Elements (original) (raw)

Last Updated : 11 Jul, 2025

A pseudo-element is a keyword added to a selector that lets you style specific parts of an element. For example, you can style the first line of a paragraph, add content before or after an element, or create complex effects with minimal code. Pseudo-elements are denoted by a double colon (::) (or : in legacy CSS).

**Syntax

selector::pseudo-element{
property: value
}

::(the double colon is a syntax for pseudo-elements)

Commonly Used CSS Pseudo-Elements

1. ::before

The ::before pseudo-element allows you to insert content before the actual content of an element.

HTML `

<style>
    p::before {
        content: "✨ ";
        color: gold;
    }
</style>

This is a paragraph.

`

2. ::after

Similar to ::before, the ::after pseudo-element inserts content after the element’s content. It is often used to add icons, styling cues, or additional details.

HTML `

<style>
    p::after {
        content: " 🔥";
        color: red;
    }
</style>

This is a paragraph.

`

3. ::first-letter

The ::first-letter pseudo-element targets the first letter of a block of text, generally used for decorative initials in paragraphs.

HTML `

<style>
    p::first-letter {
        font-size: 2em;
        color: blue;
    }
</style>

This is a paragraph.

`

4. ::first-line

The ::first-line pseudo-element is used to style the first line of a block of text. It is particularly useful for emphasizing the introduction of paragraphs.

HTML `

<style>
    p::first-line {
        font-weight: bold;
        color: green;
    }
</style>

This is a longer paragraph to demonstrate the
first-line styling in action.

`

5. ::placeholder

The ::placeholder pseudo-element styles placeholder text inside input fields.

HTML `