CSS ::after Pseudo-Element

Insert Generated Content After an Element's Content

CSS ::after Pseudo-Element

The ::after pseudo-element creates a generated element as the last child of a selected element. It is commonly used to insert decorative text, symbols, icons, and other visual content without adding extra HTML elements. The generated content is typically defined using the CSS content property.

Syntax

selector::after {
  content: "Generated content";
}

The selector identifies the element that receives the generated content.

The ::after pseudo-element creates a generated element as the last child of the selected element.

The content property specifies what the pseudo-element displays.

For example:

p::after {
  content: " End of paragraph.";
}

This rule adds the text "End of paragraph." after the existing content of each selected paragraph.

The generated text is displayed by CSS and does not become part of the HTML document's source markup.

How It Works

The ::after pseudo-element creates generated content that behaves as the last child of the selected element.

Although its name suggests that it appears after the element, the pseudo-element is generated inside the element, after its existing child content.

Consider the following HTML:

<p class="notice">Important information</p>

The following CSS adds a symbol after the paragraph text:

.notice::after {
  content: " *";
  color: #cc0000;
}

The displayed result is:

Important information *

The asterisk is generated by CSS. It is not present in the original HTML.

The pseudo-element can also be styled using properties such as color, background, font-size, margin, and display.

Note: The generated content appears only when the pseudo-element is created. In ordinary usage, this requires a content declaration with a value other than none or normal.

The content Property

The CSS content property determines what the ::after pseudo-element generates.

Common values include:

  • content: "text"; - Inserts a text string.
  • content: ""; - Creates an empty pseudo-element that can be styled.
  • content: "\2192"; - Inserts a character using a CSS Unicode escape.
  • content: attr(title); - Inserts the value of an HTML attribute.
  • content: url("icon.svg"); - Inserts an image as generated content.
  • content: none; - Prevents the pseudo-element from being generated.

For example, the following rule adds an arrow after links with a particular class:

.more-link::after {
  content: " \2192";
}

The \2192 escape represents a right arrow character.

When using content: "", the pseudo-element can still display a background, border, or other decorative styling.

Adding Text and Symbols

The ::after pseudo-element is frequently used to add short decorative text or symbols after existing content.

Adding an Arrow

.read-more::after {
  content: " \2192";
  color: #0066cc;
}

This rule adds a right arrow after elements with the read-more class.

Adding a Required Field Indicator

.required-label::after {
  content: " *";
  color: #cc0000;
}

This rule adds a red asterisk after labels with the required-label class.

The asterisk is only a visual indicator. The associated form control should also use the HTML required attribute when a value is mandatory.

Adding Quotation Marks

.quote::before {
  content: open-quote;
}
.quote::after {
  content: close-quote;
}

This example combines ::before and ::after to display quotation marks around the content of an element.

The quotation marks are generated by CSS rather than written directly in the HTML.

Styling Generated Content

Generated content can be styled with many of the same CSS properties used on ordinary HTML elements.

.status::after {
  content: "New";
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  background: #0066cc;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
}

The display: inline-block declaration allows the generated content to have padding and dimensions while remaining in the same line as the original content.

The margin-left property adds spacing between the existing content and the generated label.

The background, text color, font size, and border radius create a small visual badge.

Because generated content may not be consistently announced by assistive technology, essential status information such as "New" should be included in the HTML rather than supplied only through CSS.

Example

The following example adds a decorative arrow after a link using the ::after pseudo-element.

HTML:

<a href="/css3/references/css-reference.html" class="example-link">Explore CSS Reference</a>

CSS:

.example-link {
  display: inline-block;
  padding: 10px 14px;
  color: #0066cc;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #0066cc;
  border-radius: 5px;
}
.example-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.2s ease;
}
.example-link:hover::after {
  transform: translateX(4px);
}
.example-link:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 3px;
}

The link appears as a bordered button with a right arrow after its text.

When the pointer moves over the link, the arrow shifts four pixels to the right.

The transition property creates a smooth movement between the normal and hover states.

The :focus-visible rule provides a visible outline for keyboard navigation.

The arrow is decorative. The link text communicates the destination without depending on the generated symbol.

Creating Decorative Elements

The ::after pseudo-element can create visual decorations without inserting additional HTML elements.

An empty content value is commonly used when the pseudo-element needs only a background, border, or other visual styling.

Creating an Underline

.decorated-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 8px;
  background: #0066cc;
}

This rule creates a short blue line below the content of an element with the decorated-heading class.

The pseudo-element uses display: block so it appears on its own line.

Creating a Corner Decoration

.decorated-box {
  position: relative;
  padding: 20px;
  border: 1px solid #ccc;
}
.decorated-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #0066cc;
}

The position: relative declaration establishes the containing block for the absolutely positioned pseudo-element.

The top and right properties position the decorative square in the upper-right corner of the box.

Because the decoration is created with CSS, no additional HTML element is required.

Using HTML Attributes

The attr() function can retrieve an attribute value from the selected HTML element and display it as generated content.

For example, an element can contain a custom data-label attribute.

HTML:

<span class="file-type" data-label="PDF">Download Guide</span>

CSS:

.file-type::after {
  content: " (" attr(data-label) ")";
  color: #666;
  font-size: 12px;
}

The generated content displays the attribute value in parentheses after the existing text.

The visual result is:

Download Guide (PDF)

If the data-label attribute changes, the generated content reflects the updated attribute value.

The attr() function is useful for decorative labels and supplemental information, but essential information should remain available in the HTML content.

::after vs. ::before

The ::after and ::before pseudo-elements both create generated content associated with a selected element.

The primary difference is where the generated content is inserted.

  • ::before - Creates a generated element as the first child of the selected element.
  • ::after - Creates a generated element as the last child of the selected element.

For example:

.example::before {
  content: "[";
}
.example::after {
  content: "]";
}

With the following HTML:

<span class="example">CSS</span>

The displayed result is:

[CSS]

The opening bracket is generated before the existing content, and the closing bracket is generated after it.

Both pseudo-elements can be styled independently.

Limitations

Although ::after is widely supported, there are several important limitations.

  • Generated content does not become part of the original HTML markup.
  • The pseudo-element generally requires a content declaration to generate a visible box.
  • It cannot be used reliably on replaced elements such as <img> or <input>.
  • Generated content is not a substitute for meaningful HTML content.
  • Accessibility support for generated text can vary between assistive technologies.
  • The pseudo-element does not create an independent HTML element that can receive its own attributes or event listeners.

For example, the following selector should not be relied upon to add visible content inside an image element:

img::after {
  content: "Image caption";
}

The HTML <img> element is a replaced element, and ::after does not provide a reliable way to append generated content to it.

Use appropriate HTML elements when content needs its own structure, semantics, or interaction behavior.

Accessibility Considerations

The ::after pseudo-element is best suited for decorative content and visual enhancements.

  • Do not use generated content as the only source of essential information.
  • Keep meaningful text, instructions, and labels in the HTML document.
  • Do not rely on CSS-generated symbols alone to communicate errors or required fields.
  • Ensure that decorative content does not interfere with reading order or visual clarity.
  • Use semantic HTML elements for interactive controls instead of attempting to create them with pseudo-elements.
  • Test generated content with assistive technologies when its presentation could affect understanding.

For example, an asterisk generated after a required field label should supplement the HTML required attribute and clear form instructions rather than replace them.

For purely decorative generated text, the content property also supports an alternative text form using a slash and an empty string.

.decorative-link::after {
  content: " \2192" / "";
}

The empty alternative text indicates that the arrow does not need to contribute spoken content in implementations supporting this syntax.

Because accessibility behavior can vary, essential information should still be provided directly in the HTML.

Browser Support

The ::after pseudo-element is widely available across modern browsers, including Chrome, Edge, Firefox, Safari, and Opera.

The modern syntax uses two colons, ::after, to identify it as a pseudo-element.

For compatibility with older CSS implementations, browsers also support the legacy single-colon syntax :after.

The double-colon syntax is recommended for new stylesheets because it distinguishes pseudo-elements from pseudo-classes.

Support for individual features used with ::after, such as newer content values or animations, may vary independently.

For current compatibility information, visit Can I Use? .

Specifications

The ::after pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .

The content property and generated content behavior are also described in the CSS Generated Content Module Level 3 .

See Also:
CSS ::before Pseudo-Element
CSS content Property
CSS attr() Function
CSS display Property
CSS position Property.

References:
MDN - ::after
CSS Pseudo-Elements Module Level 4
CSS Generated Content Module Level 3 .

« Previous CSS Home Next »