CSS ::after Pseudo Element

The CSS ::after pseudo-element creates an extra element that is inserted as the last child of the matched element, right after its real content. You don't add any markup to your HTML — the browser generates the element from your stylesheet. This page explains what ::after is, how the required content property works, the gotchas to watch for, and the patterns where it's genuinely useful.

What `::after` is

::after lets you attach generated content — characters, strings of text, an image, or a decorative shape — to the end of an element without touching the document's HTML. Because the generated box is part of the element, you can animate it, position it, or float it like any normal content.

Two rules are essential:

The content property is mandatory. If you omit content, the pseudo-element is never created. Use content: "" (an empty string) when you only want a decorative box rather than text.
By default the box is inline. Set display: block (or inline-block) if you need width, height, or vertical margins to take effect.

`::after` vs `:after`

::after can also be written with the single-colon notation :after. The double-colon form is the modern CSS3 standard for pseudo-elements (to distinguish them from pseudo-classes like :hover); the single-colon form exists only for backward compatibility with old browsers. Prefer ::after unless you must support legacy engines such as Internet Explorer 8.

`::after` vs `::before`

The ::before pseudo-element inserts generated content before the element's content, while ::after inserts it after. They are otherwise identical and are frequently used together — for example, ::before and ::after are the classic way to add matching opening and closing quotation marks or paired decorative brackets around a heading.

Warning

Generated content is not part of the DOM: it cannot be selected by the user, and most screen readers ignore it (support is inconsistent across browsers). Use ::after for purely decorative or supplementary content only — never put meaning that the user must read in content.

Info

The pseudo-elements created with ::after and ::before do not apply to replaced elements such as <img> and <br>, because those elements have no document content to insert around.

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

Syntax

CSS ::after Pseudo Element

::after {
  css declarations;
}

Example of the `::after` pseudo-element:

CSS ::after example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

Try it Yourself »

In the following example, styles can be added to the content.

Example of the `::after` pseudo-element with styled content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
        background-color: #eee;
        color: #1c87c9;
        padding: 5px 3px;
        border: 2px dashed #000;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

Try it Yourself »

Common use cases

::after shines whenever you want extra visual content without polluting your markup:

Decorative shapes and dividers. A box built from content: "" plus a border or background — underlines, arrows, ribbons, tooltip tails.
Icons after links. Append an external-link arrow or file-type marker after an <a>.
The clearfix hack. Force a parent to contain its floated children.

/* External-link arrow after every link with target="_blank" */
a[target="_blank"]::after {
  content: " ↗";
}

/* Clearfix: make a container wrap its floated children */
.clearfix::after {
  content: "";
  display: block;   /* block + clear pushes the box below the floats */
  clear: both;
}

Note the empty content: "" in the clearfix: it creates the box without any visible text, which is exactly what you want for a layout-only helper.

Tips and gotchas

No content, no element. Forgetting the content property is the most common reason a ::after rule "does nothing."
Set display for sizing. An inline pseudo-element ignores width, height, and top/bottom margins. Use display: block or inline-block.
Quote-mark hygiene. Inside content strings, escape special characters with their Unicode code point (e.g. content: "\00BB" for ») so the file's encoding can't break them.

Practice

What does the ::after pseudo-element in CSS do?

It inserts content before the selected element.It inserts content after the selected element.It allows you to style selected text.It is used in conjunction with the content property.

What ::after is

::after vs :after

::after vs ::before