CSS Pseudo-Elements

CSS pseudo-elements allow you to style specific parts of an HTML element or insert generated content without adding extra HTML elements.

---

What is a CSS Pseudo-Element?

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

Pseudo-elements are written using two colons ::, such as ::before, ::after, ::first-letter, and ::first-line.

Pseudo-Element Syntax

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

How Pseudo-Elements Work

1. ::before

The ::before pseudo-element inserts generated content before the actual content of an element.

.before-example::before {
    content: "★ ";
    color: #2563eb;
}

Output

2. ::after

The ::after pseudo-element inserts generated content after the actual content of an element.

.after-example::after {
    content: " ✓";
    color: #0f766e;
}

Output

3. ::first-letter

The ::first-letter pseudo-element styles the first letter of the text inside an element.

.first-letter-example::first-letter {
    color: #7c3aed;
    font-size: 40px;
    font-weight: 700;
}

Output

4. ::first-line

The ::first-line pseudo-element styles the first line of text in an element.

.first-line-example::first-line {
    color: #2563eb;
    font-weight: 700;
}

Output

5. ::selection

The ::selection pseudo-element styles the portion of text selected by the user.

.selection-example::selection {
    background-color: #2563eb;
    color: #ffffff;
}

Output

6. ::marker

The ::marker pseudo-element styles the marker of list items.

.course-list::marker {
    color: #2563eb;
}

Output

7. ::placeholder

The ::placeholder pseudo-element styles the placeholder text inside form controls.

.name-input::placeholder {
    color: #7c3aed;
}

Output

Practical Example: Decorative Heading

Pseudo-elements can also be used to add decorative lines or icons around headings.

.decorative-heading::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 4px;
    background-color: #2563eb;
    margin-right: 10px;
    vertical-align: middle;
}

Output

Common CSS Pseudo-Elements

Pseudo-Class vs Pseudo-Element

Combined Example

.course-title {
    color: #212529;
}

.course-title:hover {
    color: #2563eb;
}

.course-title::before {
    content: "★ ";
    color: #f59e0b;
}

.course-title::after {
    content: " ✓";
    color: #0f766e;
}

Output

Best Practices

• Use pseudo-elements for presentation and decoration.
• Keep meaningful content in the HTML whenever it is important for accessibility or search engines.
• Use ::before and ::after carefully for generated content.
• Test pseudo-element styles on different screen sizes.
• Keep decorative CSS separate from core content styles.