::before and ::after

Learn ::before and ::after pseudo-elements.

What are ::before and ::after?

In CSS, a pseudo-element styles a specific part of an element without adding new HTML tags. The two best known are ::before and ::after. They drop a new box inside the targeted element, before and after its content.

The double colon (::) marks a pseudo-element. A single colon still works, but the double colon is the modern form. These boxes never appear in the HTML source; CSS alone makes them visible.

Pseudo-element syntax

The pseudo-element syntax: a double colon and a name after the selector. a::after adds a box at the end of every link; .card::before adds one at the start of every element with class="card".

These boxes behave like real elements: you can give them color, margin, even a background. They never show up in the HTML source; the browser draws them live.

Exercise Add a badge with ::before

Add a ::before pseudo-element to the .badge class selector. Inside, declare a content value (a quoted string), then color: white and background: red.

Show example solution

/* add ::before for the badge */
.badge::before {
  content: "New";
  color: white;
  background: red;
}

Test yourself

Where does the ::after pseudo-element land?
```
a::after {
  content: '↗';
}
```
- Right before the tag, outside it
- Inside the element, after its content
- Only inside the body element
- Next to the selector, as an independent element
Show answer

Inside the element, after its content — Correct. ::after adds a box inside the element, after the existing content.

Write the ::after pseudo-element

____ {
  content: '↗';
}

Show answer

::after {
  content: '↗';
}

Match each pseudo-element to its target

::before

Box before the content
::after

Box after the content
::first-letter

The first letter
::selection

Selected text

Next lesson: Content property

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies