CSS Selectors

CSS Pseudo Elements

CSS Pseudo Elements are used to style specific parts of an HTML element.

Unlike pseudo classes, which target an element's state, pseudo elements target a particular portion of an element's content. The supporting concepts are explained in CSS Pseudo Classes and Generated Content.

Pseudo elements begin with a double colon (::) and allow you to:

Style the first letter
Style the first line
Insert content before or after an element
Customize selected text

Common pseudo elements include:

::before
::after
::first-letter
::first-line
::selection

Syntax

CSS Pseudo Elements Syntax

css

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

CSS Pseudo Elements Example

css

p::first-letter {
    font-size: 32px;
}

Makes the first letter of every paragraph larger.

Attributes

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

Style registered text ranges

The ::highlight() pseudo-element styles a named range registered through the CSS Custom Highlight API. It is useful for search results, annotations, and editor selections that should not require wrapping the document text in extra elements. The range still needs to be created and registered with JavaScript.

Focused example

css

::highlight(search-result) {
  color: #172554;
  background: #fde68a;
  text-decoration: underline;
}

Example

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>

Browser Support

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

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

Pseudo elements use a double colon (::) in modern CSS.
::before and ::after require the content property.
::first-letter is often used in magazine-style layouts.
::selection allows customization of highlighted text.
Pseudo elements do not modify the actual HTML content.

Common Pseudo Elements

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

Conclusion

CSS Pseudo Elements allow you to style specific portions of content and create decorative effects without modifying the HTML structure. They are powerful tools for enhancing typography, improving design, and adding visual details to web pages.

PreviousCSS Pseudo Classes NextCSS Colors