23. CSS Pseudo-elements

What you will learn

What a pseudo-element is
How to style the first letter and first line
How to add decoration with ::before and ::after
How to style selected text and placeholders

What is a pseudo-element?

A pseudo-element styles a part of an element, or adds a virtual element that is not in your HTML. It is written with two colons, for example p::first-line.

Syntax

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

Pseudo-element	Styles
`::first-letter`	The first letter of a block
`::first-line`	The first line of a block
`::before`	Generated content placed before an element’s content
`::after`	Generated content placed after an element’s content
`::selection`	Text the visitor has highlighted
`::placeholder`	Placeholder text in a form field
`::marker`	List bullets and numbers

First letter and first line

Example

<style>
  p { max-width: 320px; }
  p::first-letter {
    font-size: 2.5em;
    font-weight: bold;
    color: #0d6efd;
    float: left;
    margin-right: 6px;
    line-height: 1;
  }
  p::first-line { text-transform: uppercase; }
</style>

<p>Learning to build websites is a skill that rewards patience, practice, and curiosity every single day.</p>

Output

Learning to build websites is a skill that rewards patience, practice, and curiosity every single day.

::before and ::after

These add generated content. They need the content property. Without it, nothing appears. The content can be text, an empty string "", or a symbol.

Example

<style>
  .tip::before {
    content: "Tip: ";
    font-weight: bold;
    color: #0d6efd;
  }
  .done::after {
    content: " \2713";
    color: #146c43;
  }
</style>

<p class="tip">Save your work often.</p>
<p class="done">Lesson complete</p>

Output

Tip: Save your work often.

Lesson complete ✓

The code \2713 is a CSS escape for the check mark. Use ::before and ::after for decoration only. Screen readers may read generated text, and it cannot be selected or searched, so never put essential information in it.

Decorative shapes

With content: "" you can draw shapes, such as a coloured line under a heading.

Example

<style>
  h2.title { margin-bottom: 20px; position: relative; }
  h2.title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #0d6efd;
    margin-top: 6px;
    border-radius: 2px;
  }
</style>

<h2 class="title">Our courses</h2>

Output

Our courses

Selection and placeholder

Example

<style>
  ::selection {
    background-color: #0d6efd;
    color: white;
  }
  input::placeholder {
    color: #6c757d;
    font-style: italic;
  }
</style>

<p>Select this text with your mouse.</p>
<input type="text" placeholder="Italic grey placeholder">

Keep selection colours readable. Placeholder text must also have enough contrast, and it never replaces a visible label.

Pseudo-class or pseudo-element?

A pseudo-class (one colon) picks an element in a certain state: a:hover.
A pseudo-element (two colons) picks or creates a part of an element: p::first-line.

Common mistakes

Forgetting content on ::before or ::after, so nothing appears.
Putting important information in generated content.
Using a single colon for the newer pseudo-elements. Use two.
Forgetting display: block or a size on an empty shape, so it has no visible area.

Exercise

Add an arrow, " \2192", after the link text using a pseudo-element, and make the arrow dark blue (#082b59).

Show solution

<style>
  a::after {
    content: " \2192";
    color: #082b59;
  }
</style>
<a href="https://example.com">Example site</a>

Knowledge check

1. How many colons does a pseudo-element use?

Two.

2. Which property must be set for ::before to show anything?

content

3. Should essential information go in generated content?

No. It is for decoration only.

Summary

Pseudo-elements style parts of an element or add decoration.
::before and ::after need content.
Use them for decoration, never for essential text.