CSS Pseudo-Elements Guide

Introduction

CSS selectors can target whole HTML elements.

For example:

1p {2  color: #333333;3}

This styles the whole paragraph.

CSS can also target specific parts of an element.

For example, you can style the first line of a paragraph:

1p::first-line {2  font-weight: bold;3}

You can style the first letter:

1p::first-letter {2  font-size: 2rem;3}

You can also create decorative content before or after an element:

1.note::before {2  content: “Note: “;3  font-weight: bold;4}

These are called pseudo-elements.

Pseudo-elements let CSS style parts of an element or create generated content without adding extra HTML elements.

The most common pseudo-elements include:

1::before2::after3::first-line4::first-letter5::selection

They are useful for decoration, small visual cues, typography, and improving the presentation of text.

What Is a Pseudo-Element?

A pseudo-element is a CSS selector that targets a specific part of an element.

It usually starts with two colons:

1::

For example:

1p::first-letter {2  font-size: 2rem;3}

The pseudo-element is:

1::first-letter

This selector means:

1select the first letter of each paragraph

The pseudo-element is not written in the HTML.

The browser creates or identifies that part of the element for styling.

Pseudo-Elements vs Pseudo-Classes

Pseudo-elements and pseudo-classes are different.

A pseudo-class targets a state or condition:

1a:hover {2  text-decoration: underline;3}

This styles a link when it is hovered.

A pseudo-element targets part of an element:

1p::first-line {2  font-weight: bold;3}

This styles the first line of a paragraph.

A simple difference is:

1pseudo-class = state or condition2pseudo-element = part of an element

Pseudo-classes usually use one colon.

Pseudo-elements usually use two colons.

Why Pseudo-Elements Are Useful

Pseudo-elements are useful because they let you style or add small visual details without changing the HTML structure.

For example, instead of adding a decorative icon in the HTML:

1<p><span>*</span> Important note</p>

you can use CSS:

1.note::before {2  content: “* “;3}

This keeps the HTML focused on meaning.

The CSS handles decoration.

Pseudo-elements can be used for:

1decorative icons2small labels3visual separators4first-letter styling5first-line styling6selected text styling7quotation marks8badges9layout decoration

They are powerful, but they should be used carefully.

Important content should usually remain in the HTML.

The ::before Pseudo-Element

The ::before pseudo-element creates content before an element’s real content.

Example:

1.note::before {2  content: “Note: “;3  font-weight: bold;4}

HTML:

1<p class=”note”>Remember to save your CSS file.</p>

The browser displays something like:

1Note: Remember to save your CSS file.

The text Note: is generated by CSS.

It does not appear in the HTML.

::before Needs the content Property

For ::before to appear, it usually needs the content property.

This will not show anything useful:

1.note::before {2  font-weight: bold;3}

This works:

1.note::before {2  content: “Note: “;3  font-weight: bold;4}

The content property tells the browser what the pseudo-element should contain.

For decorative pseudo-elements, an empty string is common:

1.card::before {2  content: “”;3}

This creates an empty pseudo-element that can be styled as a shape, line, background, or decoration.

Using ::before for Decorative Labels

HTML:

1<p class=”tip”>Use classes for reusable styles.</p>

CSS:

1.tip::before {2  content: “Tip: “;3  font-weight: bold;4  color: navy;5}

This adds Tip: before the paragraph text.

This can be useful when the label is decorative or repeated.

However, if the label is essential information, consider putting it in the HTML instead.

HTML is usually the right place for important content.

Using ::before for Decoration

You can also use ::before for purely visual decoration.

HTML:

1<h2 class=”section-title”>CSS Selectors</h2>

CSS:

1.section-title::before {2  content: “”;3  display: inline-block;4  width: 8px;5  height: 8px;6  background-color: navy;7  margin-right: 8px;8}

This adds a small square before the heading.

The square is decoration.

It does not need to be part of the HTML.

This is a good use of a pseudo-element.

The ::after Pseudo-Element

The ::after pseudo-element creates content after an element’s real content.

Example:

1.external-link::after {2  content: ” ↗”;3}

HTML:

1<a class=”external-link” href=”https://example.com”>Visit Example</a>

The browser displays something like:

1Visit Example ↗

The arrow is generated by CSS.

This can be useful for visual cues.

::after Example with Links

You can use ::after to mark links that open in a new tab.

HTML:

1<a href=”https://example.com” target=”_blank”>External resource</a>

CSS:

1a[target=”_blank”]::after {2  content: ” ↗”;3}

This adds an arrow after links with target="_blank".

The selector uses an attribute selector and a pseudo-element together.

The attribute selector finds the links.

The pseudo-element adds the visual cue.

::before and ::after Are Inline by Default

Generated content from ::before and ::after is inline by default.

For example:

1.note::before {2  content: “Note: “;3}

The generated text appears in the same line as the element’s content.

You can change the display type:

1.card::before {2  content: “”;3  display: block;4  height: 4px;5  background-color: navy;6}

This creates a block-level decorative line before the card content.

The display property controls how the pseudo-element behaves.

Creating a Decorative Line with ::before

HTML:

1<article class=”card”>2  <h2>CSS Basics</h2>3  <p>Learn how CSS styles web pages.</p>4</article>

CSS:

1.card::before {2  content: “”;3  display: block;4  height: 4px;5  background-color: navy;6  margin-bottom: 16px;7}

This adds a decorative line before the card content.

No extra HTML is needed.

This keeps the markup cleaner because the line is visual decoration, not meaningful page content.

Creating a Badge with ::after

HTML:

1<h2 class=”lesson-title”>CSS Selectors</h2>

CSS:

1.lesson-title::after {2  content: ” New”;3  font-size: 0.75rem;4  font-weight: bold;5}

This adds the word New after the lesson title.

Be careful with this pattern.

If New is important information users need to understand the page, it may be better to include it in the HTML:

1<h2>CSS Selectors <span>New</span></h2>

Use CSS-generated content mainly for decoration or non-essential cues.

The content Property

The content property defines what ::before or ::after should generate.

Examples:

1content: “”;

1content: “Tip: “;

1content: ” ↗”;

An empty string creates a pseudo-element with no text content.

That is useful when creating shapes or decorative blocks.

Text content creates visible text.

The content property can also use more advanced values, but simple text and empty strings are enough for many common uses.

Important Content Should Usually Be in HTML

Generated content can be useful, but it has limits.

This may look convenient:

1.button::after {2  content: “Submit application”;3}

But it is not a good way to provide important button text.

Better HTML:

1<button type=”submit”>Submit application</button>

Important text should usually be part of the HTML.

CSS should support presentation.

Do not rely on pseudo-elements as the only place where essential content exists.

The ::first-line Pseudo-Element

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

Example:

1p::first-line {2  font-weight: bold;3}

HTML:

1<p>2  CSS controls the appearance of web pages. It can change colours, spacing,3  layout, fonts, and more.4</p>

The first visible line of the paragraph becomes bold.

The exact first line depends on the width of the container, the font size, and the viewport.

If the browser window changes size, the first line may change.

::first-line Depends on Layout

The first line is not necessarily the first sentence.

It is the first rendered line.

For example:

1<p class=”intro”>2  CSS selectors tell the browser which elements to style and when to apply those styles.3</p>

CSS:

1.intro::first-line {2  color: navy;3}

On a wide screen, the first line may contain many words.

On a narrow screen, it may contain fewer words.

The browser decides the first line after layout.

This makes ::first-line useful for typographic effects, but not for selecting a specific sentence.

Properties for ::first-line

Not every CSS property applies to ::first-line.

It is mainly used for text styling.

Common useful properties include:

1color2font3font-weight4font-style5letter-spacing6word-spacing7text-decoration8text-transform9line-height10background

Example:

1.intro::first-line {2  font-weight: bold;3  color: navy;4}

Use it for typographic emphasis.

Do not expect every layout property to work on ::first-line.

The ::first-letter Pseudo-Element

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

Example:

1p::first-letter {2  font-size: 2rem;3  font-weight: bold;4}

HTML:

1<p>CSS makes web pages easier to design and customise.</p>

The first letter C becomes larger and bold.

This can be used for drop-cap style effects.

Creating a Drop Cap with ::first-letter

A drop cap is a large first letter at the start of a paragraph.

HTML:

1<p class=”article-intro”>2  CSS gives you control over the visual design of a web page.3</p>

CSS:

1.article-intro::first-letter {2  font-size: 3rem;3  font-weight: bold;4  float: left;5  line-height: 1;6  margin-right: 8px;7}

This creates a large first letter that sits beside the first lines of text.

Use this sparingly.

It can be decorative, but it may not suit every design or reading context.

::first-letter Depends on Text Content

The first letter is based on the text content of the element.

Example:

1<p>”CSS” stands for Cascading Style Sheets.</p>

Depending on the browser and punctuation, the first styled part may include punctuation or the first actual letter.

This can vary in subtle ways.

For simple paragraphs that start with normal text, ::first-letter is straightforward.

For text starting with quotes, symbols, or inline elements, test the result.

The ::selection Pseudo-Element

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

For example, when the user clicks and drags over text.

Example:

1::selection {2  background-color: navy;3  color: white;4}

This changes the appearance of selected text.

You can apply it globally:

1::selection {2  background-color: navy;3  color: white;4}

or only inside certain elements:

1.article-content::selection {2  background-color: #eeeeee;3  color: #000000;4}

::selection Example

HTML:

1<article class=”article-content”>2  <p>Select this text to see the custom selection style.</p>3</article>

CSS:

1.article-content::selection {2  background-color: #0055cc;3  color: white;4}

When the user selects text inside .article-content, the selected text uses the custom colours.

Keep selection colours readable.

The selected text should have enough contrast to remain easy to read.

Styling Generated Content

Generated content from ::before and ::after can be styled like normal inline or block content.

Example:

1.warning::before {2  content: “!”;3  display: inline-block;4  width: 1.5rem;5  height: 1.5rem;6  text-align: center;7  font-weight: bold;8  margin-right: 0.5rem;9}

HTML:

1<p class=”warning”>Check your form details before submitting.</p>

This creates a small warning marker before the paragraph.

The marker is generated by CSS.

Positioning ::before and ::after

Pseudo-elements can be positioned.

Example:

1<div class=”card”>2  <h2>Featured Lesson</h2>3  <p>Learn CSS selectors.</p>4</div>

CSS:

1.card {2  position: relative;3}4 5.card::after {6  content: “”;7  position: absolute;8  top: 12px;9  right: 12px;10  width: 12px;11  height: 12px;12  background-color: navy;13}

This adds a decorative square in the top-right corner of the card.

The .card is positioned relatively so the absolutely positioned pseudo-element is placed relative to the card.

Pseudo-Elements and Accessibility

Pseudo-elements can improve visual design, but they should not hide important information from the HTML.

Good use:

1.external-link::after {2  content: ” ↗”;3}

This is a small visual cue.

Riskier use:

1.required-field::after {2  content: “Required”;3}

If users need to know that a field is required, it is usually better to include that information clearly in the HTML and form attributes:

1<label for=”email”>Email address <span>(required)</span></label>2<input type=”email” id=”email” required>

CSS-generated content may not always be announced or understood consistently by assistive technologies.

Keep essential information in the HTML.

Pseudo-Elements and the DOM

Pseudo-elements are not normal HTML elements.

They do not appear as elements in your HTML source.

For example, this CSS:

1.note::before {2  content: “Note: “;3}

does not insert this into your HTML file:

1<span>Note: </span>

The browser creates the pseudo-element for rendering.

Developer tools may show pseudo-elements in the page inspector, but they are still not real HTML elements you wrote.

This matters when thinking about structure, accessibility, and JavaScript.

Pseudo-Elements with Classes

Pseudo-elements are often combined with class selectors.

Example:

1.card::before {2  content: “”;3  display: block;4  height: 4px;5  background-color: navy;6}

HTML:

1<article class=”card”>2  <h2>Card Title</h2>3  <p>Card text.</p>4</article>

Only elements with class="card" receive the pseudo-element.

This is a common and useful pattern.

The class identifies the component.

The pseudo-element adds decoration.

Pseudo-Elements with Attribute Selectors

You can combine pseudo-elements with attribute selectors.

Example:

1a[target=”_blank”]::after {2  content: ” ↗”;3}

HTML:

1<a href=”https://example.com” target=”_blank”>External site</a>

This adds an arrow after links that open in a new tab.

Another example:

1a[href$=”.pdf”]::after {2  content: ” PDF”;3}

This adds a text cue after links ending in .pdf.

Again, use generated content carefully.

For essential information, HTML may be more reliable.

Pseudo-Elements with Pseudo-Classes

You can combine pseudo-elements with pseudo-classes.

Example:

1a:hover::after {2  content: ” →”;3}

This shows an arrow after a link when it is hovered.

Another example:

1button:focus-visible::after {2  content: ” ✓”;3}

This shows generated content when a button has visible focus.

Use these patterns sparingly.

Changing content during interaction can be distracting if overused.

Single Colon vs Double Colon

Modern CSS uses double colons for pseudo-elements:

1p::first-line {2  font-weight: bold;3}

Older CSS examples may use a single colon:

1p:first-line {2  font-weight: bold;3}

Many browsers still support single-colon syntax for older pseudo-elements for compatibility.

However, the modern convention is to use double colons for pseudo-elements:

1::before2::after3::first-line4::first-letter5::selection

Use double colons in new CSS.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Pseudo-Elements Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <article class=”article-content”>12      <h1 class=”article-title”>Pseudo-Elements in CSS</h1>13 14      <p class=”intro”>15        CSS pseudo-elements let you style specific parts of an element and add decorative generated content.16      </p>17 18      <p class=”note”>19        Use pseudo-elements for presentation, not as the only place for important content.20      </p>21 22      <a href=”https://example.com” target=”_blank”>External resource</a>23    </article>24 25    <section class=”card”>26      <h2>Featured Lesson</h2>27      <p>Learn how generated content works.</p>28    </section>29  </main>30 31</body>32</html>

CSS:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4}5 6.container {7  width: 90%;8  max-width: 900px;9  margin: 0 auto;10}11 12.article-title::after {13  content: “”;14  display: block;15  width: 80px;16  height: 4px;17  background-color: navy;18  margin-top: 12px;19}20 21.intro::first-line {22  font-weight: bold;23  color: navy;24}25 26.intro::first-letter {27  font-size: 2.5rem;28  font-weight: bold;29}30 31.note::before {32  content: “Note: “;33  font-weight: bold;34}35 36a[target=”_blank”]::after {37  content: ” ↗”;38}39 40.card {41  position: relative;42  padding: 24px;43  border: 1px solid #dddddd;44}45 46.card::before {47  content: “”;48  display: block;49  height: 4px;50  background-color: navy;51  margin-bottom: 16px;52}53 54::selection {55  background-color: navy;56  color: white;57}

This example uses ::after, ::first-line, ::first-letter, ::before, and ::selection.

How the Complete Example Works

This rule creates a decorative line after the article title:

1.article-title::after {2  content: “”;3  display: block;4  width: 80px;5  height: 4px;6}

This rule styles the first line of the intro paragraph:

1.intro::first-line {2  font-weight: bold;3}

This rule styles the first letter of the intro paragraph:

1.intro::first-letter {2  font-size: 2.5rem;3}

This rule adds a generated label before the note:

1.note::before {2  content: “Note: “;3}

This rule adds an arrow after links that open in a new tab:

1a[target=”_blank”]::after {2  content: ” ↗”;3}

This rule changes the style of selected text:

1::selection {2  background-color: navy;3  color: white;4}

Each pseudo-element targets a specific part of the rendered page.

Common Mistake: Forgetting content with ::before and ::after

This usually will not show anything:

1.note::before {2  color: navy;3}

This works:

1.note::before {2  content: “Note: “;3  color: navy;4}

For ::before and ::after, remember to include content.

Even decorative pseudo-elements usually need:

1content: “”;

Common Mistake: Using Pseudo-Elements for Essential Content

Less suitable:

1.price::after {2  content: ” including VAT”;3}

If the VAT information is important, put it in the HTML:

1<p class=”price”>£20 <span>including VAT</span></p>

Generated content can be useful for visual cues, but important information should usually be written in the HTML.

Common Mistake: Confusing Pseudo-Classes and Pseudo-Elements

Pseudo-class:

1a:hover {2  color: blue;3}

Pseudo-element:

1p::first-line {2  color: blue;3}

:hover is a state.

::first-line is part of an element.

Use one colon for pseudo-classes.

Use two colons for pseudo-elements.

Common Mistake: Expecting ::first-line to Mean First Sentence

This styles the first rendered line:

1p::first-line {2  font-weight: bold;3}

It does not necessarily style the first sentence.

The first line changes depending on:

1container width2font size3viewport size4line breaks5text length

Use ::first-line for visual typography, not for selecting a fixed piece of text.

Common Mistake: Overusing Decorative Pseudo-Elements

Pseudo-elements can make designs more polished, but too many decorative additions can clutter the page.

For example:

1h2::before {2  content: “★ “;3}4 5h2::after {6  content: ” ★”;7}8 9a::after {10  content: ” →”;11}12 13p::before {14  content: “• “;15}

This may become visually noisy.

Use pseudo-elements where they support the design.

Avoid adding decoration to everything.

Common Mistake: Not Testing Selection Colours

This can look good in theory:

1::selection {2  background-color: yellow;3  color: white;4}

But white text on yellow can be hard to read.

Selection styles should have enough contrast.

Always test selected text to make sure it remains readable.

Common Mistake: Forgetting Pseudo-Elements Are Not Real HTML Elements

Pseudo-elements are rendered by the browser, but they are not normal HTML elements in your source.

You cannot rely on them in the same way as real HTML content.

If content needs to be copied, translated, indexed, announced, submitted, or understood as part of the document, it usually belongs in HTML.

Use pseudo-elements for presentation and decoration.

Best Practices

Use double colons for pseudo-elements.

Use ::before and ::after for decorative generated content.

Include the content property with ::before and ::after.

Use content: "" for decorative shapes or lines.

Keep important content in HTML.

Use ::first-line for typographic first-line styling.

Use ::first-letter for drop caps or first-letter emphasis.

Use ::selection to customise selected text carefully.

Check that selection colours are readable.

Avoid overusing decorative pseudo-elements.

Use browser developer tools to inspect generated pseudo-elements.

Summary

Pseudo-elements let CSS style specific parts of an element or add generated content.

They usually use double colons:

1selector::pseudo-element {2  property: value;3}

The ::before pseudo-element adds generated content before an element’s content:

1.note::before {2  content: “Note: “;3}

The ::after pseudo-element adds generated content after an element’s content:

1a[target=”_blank”]::after {2  content: ” ↗”;3}

The ::first-line pseudo-element styles the first rendered line:

1p::first-line {2  font-weight: bold;3}

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

1p::first-letter {2  font-size: 2rem;3}

The ::selection pseudo-element styles selected text:

1::selection {2  background-color: navy;3  color: white;4}

The main idea is simple:

1Pseudo-elements let CSS style parts of elements and add presentational content.

Used carefully, pseudo-elements help you create cleaner HTML and more flexible visual design.