::after CSS Pseudo Element

The ::after pseudo-element creates a generated element that is rendered immediately after the content of the selected element. It does not exist in the DOM tree as a real element, but the browser creates it for layout and rendering. Use cases, behavior, limitations and practical tips follow.

What it is and how it behaves

• Generated content: The ::after element can insert generated content via the CSS content property (text, counters, strings, or images via url()). If content is omitted or set to none, the pseudo-element will not be generated in most browsers.
• Placement: It is rendered as the last child of the element’s content (after any child elements), so it participates in layout as if it were the element’s final child.
• Box model: The pseudo-element accepts most box-model properties (display, width, height, margin, padding, border). It can be display: block, inline, inline-block, flex, grid, etc., and will lay out accordingly.
• Positioning and stacking: It can be positioned (static/relative/absolute/fixed/sticky) and can have z-index. As a generated element it can form stacking contexts; its stacking relationships follow the same rules as regular elements.
• Interaction: By default it can receive pointer events; if purely decorative, set pointer-events: none so it doesn’t interfere with user interaction.
• Scripting & accessibility: You cannot select the pseudo-element directly via the DOM (there is no document.querySelector for it), though you can examine computed styles via getComputedStyle(element, '::after'). Content generated purely with CSS may not be accessible to assistive technologies in all contexts - do not rely on ::after for essential content or interactive text.

Common uses

• Decorative icons or flourishes (e.g., arrows, bullets, badges) without extra markup.
• Clearfix: insert a clearing block to contain floated children.
• Visual overlays (shadows, gradients, masks) positioned absolutely on top of or behind content.
• Adding punctuation or quotes programmatically, e.g., for styling quotes.
• Counters for lists with counter-reset / counter-increment and content: counter(...).
• Simple tooltips with content: attr(data-...) (note accessibility caveats).
• Accessibility note: use real DOM elements for content that must be read or interacted with by assistive tech.

Comparison

• It behaves similarly to ::before, except ::before generates a first-child-like element before the element’s actual content, while ::after is placed after content.

Practical tips and gotchas

• Always set content (even an empty string) if you need the pseudo-element to exist. Example: content: "".
• If you need the pseudo-element to occupy block space, set display (e.g., display: block or inline-block).
• For overlays spanning the host element: make the host position: relative and the pseudo-element position: absolute; set inset/left/right/top/bottom as needed.
• For decorative elements that should not block interactions: pointer-events: none.
• For retina images or icon fonts, using background-image or font-based icons on the pseudo-element is common; avoid using content: url(...) for critical images because it behaves differently and has constraints.
• Keep important content in real HTML for accessibility and SEO; use pseudo-elements only for supplementary/decorative purposes.

Examples

Decorative arrow after links:

a.link::after {
content: "→";
margin-left: 0.35em;
font-size: 0.9em;
color: currentColor;
}

Clearfix using ::after:

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

Overlay (semi-transparent dark layer) using absolute positioning:

.card {
position: relative;
overflow: hidden;
}
.card::after {
content: "";
position: absolute;
inset: 0;                 / top:0; right:0; bottom:0; left:0; /
background: rgba(0,0,0,0.35);
pointer-events: none;     / allow clicks through the overlay /
}

Tooltip using data attribute (not a replacement for accessible tooltips):

.has-tooltip::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
transition: opacity 0.12s;
pointer-events: none;
}
.has-tooltip:hover::after {
opacity: 1;
}

List counter example:

.steps {
counter-reset: step;
}
.steps li::after {
counter-increment: step;
content: " (" counter(step) ")";
color: #666;
font-size: 0.9em;
}

When to avoid ::after

• Do not use it for content that must be selectable, focusable, or read reliably by screen readers.
• Avoid complex interactivity (forms, links) inside pseudo-elements; they are not real DOM elements and can behave inconsistently.