::after creates a pseudo-element that acts as the last child of the selected element. It is inline by default and is usually paired with the content property for icons, labels, or decoration.
Generated ::after text is not reliably read by screen readers. Keep important information in the document, not only in CSS.
content is required to showIf content is omitted, invalid, normal, or none, the pseudo-element is not rendered.
selector::after { content: …; … }Prefer double-colon ::after. The older single-colon :after still works in browsers.
| Pattern | Description | Try it |
|---|---|---|
p::after { content: " …"; } | Append text after a paragraph | Try it |
.box::after { content: ""; } | Empty string for a decorative shape | Try it |
a::after { content: " (" attr(href) ")"; } | Show a link’s href after the link text | Try it |
::before vs ::after | Content before vs after the element’s real text | Try it |
::afterPick an element, attach ::after, then set content.
img / input).selector::after { … }.content to a string, "", or attr(…).display, color, size).| Piece | Required? | Role |
|---|---|---|
| Originating element | Yes | Real element that owns the pseudo-element |
::after | Yes | Creates the last-child pseudo box |
content | Yes (to show) | Defines what is generated |
| Other properties | Optional | Color, size, position, display |
The green label after the sentence comes from ::after—not from extra HTML text.
Each snippet focuses on ::after and content. Use Try It Yourself for a live editor.
Add a short label after a paragraph (MDN-style demo).
.exciting::after {
content: " <- EXCITING!";
color: darkgreen;
font-weight: bolder;
}.exciting is the originating paragraph.::after. A last-child pseudo box is created.content. The string becomes the generated text.Use an empty string so you can draw a shape with box styles.
.ribbon::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-left: 6px;
background: #ffba10;
vertical-align: middle;
}content: "". The pseudo-element exists but has no text.inline-block lets you set width and height.Pull an attribute into generated content with attr().
a::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #64748b;
}a::after runs on each anchor.attr(href) copies the href value.Most “::after is broken” bugs are missing content or a replaced element.
Omitting content, or using none / normal, hides the pseudo-element entirely.
img, input, and similar replaced elements cannot host ::after. Style a wrapper instead.
Required labels, errors, and instructions belong in HTML so assistive tech can read them.
::after paints after ::beforeWith no z-index, ::after content sits above ::before because it comes later in the flow.
::after over :afterDouble colon marks a pseudo-element. Single colon still works for compatibility.
::after is a browser CSS pseudo-element. Node.js, Deno, and Bun do not evaluate it.
Supported in all major browsers for decades (Baseline Widely available). Safe for decorative UI patterns.
Bottom line: Production-ready. Prefer ::after (double colon), always set content, and keep meaningful text in HTML.
content or nothing appears.::before: after the content vs before it.One line: el::after { content: "…"; } draws content after the element’s real children.
Learn the matching pseudo-element that inserts content before an element.
8 people found this page helpful