CSS Pseudo-elements

CSS pseudo-elements are used to style certain parts of an element. They allow you to apply styles to specific portions of an element's content or generate additional content that is not present in the HTML. Pseudo-elements are denoted by a double colon "::" followed by the pseudo-element name.

Here are some common CSS pseudo-elements:

::before Pseudo-element

This pseudo-element is used to insert content before the actual content of an element. It is often used for decorative elements or additional styling.

Example

p::before {
    content: "\2022"; /* Unicode character for a bullet point */
    margin-right: 5px;
}

You can click on above box to edit the code and run again.

Output

::after Pseudo-element

Similar to ::before, this pseudo-element inserts content after the actual content of an element.

Example

a::after {
    content: " (link)";
    color: #888;
}

You can click on above box to edit the code and run again.

Output

::first-line Pseudo-element

Used to style the first line of text within an element.

Example

p::first-line {
    font-weight: bold;
    font-size: 120%;
    color: red;
}

You can click on above box to edit the code and run again.

Output

You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.

::first-letter Pseudo-element

Allows you to style the first letter of text within an element.

Example

p::first-letter {
    font-size: 300%;
    color: red;
}

You can click on above box to edit the code and run again.

Output

You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!