CSS Pseudo Elements

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

Pseudo Element	Description	Example
::before	Inserts content before an element	p::before
::after	Inserts content after an element	p::after
::first-letter	Styles the first letter	p::first-letter
::first-line	Styles the first line	p::first-line
::selection	Styles selected text	::selection

CSS Pseudo Elements Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Pseudo Elements Example</title>
    <style>
        p::first-letter {
            font-size: 36px;
            color: red;
            font-weight: bold;
        }
        p::first-line {
            color: blue;
        }
        h2::before {
            content: "★ ";
            color: orange;
        }
        h2::after {
            content: " ★";
            color: orange;
        }
        ::selection {
            background-color: yellow;
            color: black;
        }
    </style>
</head>
<body>
    <h2>Featured Article</h2>
    <p>
        CSS pseudo elements allow developers to style specific parts of an element.
        They are commonly used for decorative effects, typography, and dynamic content.
    </p>
</body>
</html>

Feature	Chrome	Edge	Firefox	Safari
::before	1	12	1.5	4
::highlight()	105	105	149	17.2

Syntax

Attributes

Style registered text ranges

Example

Browser Support

Notes

Common Pseudo Elements

Conclusion

Pseudo Element	Purpose
::before	Add content before an element
::after	Add content after an element
::first-letter	Style the first letter
::first-line	Style the first line
::selection	Style selected text