CSS Pseudo-Element - Detailed Overview

Introduction to CSS Pseudo-Elements

CSS pseudo-elements are used to style specified parts of an element. They can be used to insert content before or after an element’s content, or to style specific parts of an element. Common pseudo-elements include:

• ::before
• ::after
• ::first-line
• ::first-letter

::before

The ::before pseudo-element inserts content before the content of an element:

.example::before {
    content: "Before - ";
    color: red;
}

::after

The ::after pseudo-element inserts content after the content of an element:

.example::after {
    content: " - After";
    color: blue;
}

::first-line

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

.example::first-line {
    color: green;
}

::first-letter

The ::first-letter pseudo-element styles the first letter of an element:

.example::first-letter {
    font-size: 2em;
    color: orange;
}

Combining ::first-letter and ::first-line

Here's an example that demonstrates the use of both ::first-letter and ::first-line pseudo-elements:

.pseudo-element span::first-letter {
    color: purple;
    font-size: 2em;
}