← All languages
CSS construct of the day
Random

::after

Creates a pseudo-element that is the last child of the selected element.

Description

The ::after pseudo-element creates a child element at the very end of the selected element. Like ::before, it is inline by default and requires the content property to generate content. It does not appear in the DOM tree and cannot be selected or interacted with by the user.

::after is frequently used for decorative elements, clearfixes, visual indicators, and cosmetic additions. A common pattern is the clearfix hack, where a parent element with ::after { content: ''; display: table; clear: both; } clears floated children.

The pseudo-element participates fully in the box model and can be styled with any CSS properties including position, transform, and animation. It appears after all real child content of the element, making it useful for trailing decorations, external link icons, or tooltip arrows.

Arguments

NameDescriptionOptional
content The content property value (required). Can be a string, url(), attr(), counter(), or empty string. No

Example

.external-link::after {
  content: ' \2197';
  font-size: 0.8em;
}

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

Reference