Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS pseudo-elements: decorate without relocating meaning

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

A pseudo-element such as ::before or ::after creates a stylable box associated with a selected element. The box can carry decoration without adding a markup wrapper.

How the rule works

A case timeline needs a small line and dot before each entry. The entry's date, event text, and status belong in the document; the dot is an optional visual cue. Draw it with a pseudo-element so the layout stays compact. Generated content is not a reliable place for required instructions, identifiers, or status wording, and the accessibility treatment of generated text can vary. The ornament should disappear without losing meaning when CSS is disabled or forced colors replace its paint. Scope the rule to the timeline component, set a containing position, and avoid absolute coordinates tied to one font size. Check a long translated event and a zoomed page before declaring the offset stable.

css
.case-timeline__entry { position: relative; padding-inline-start: 1.5rem; }
.case-timeline__entry::before {
  content: "";
  position: absolute;
  inset-inline-start: .15rem;
  inset-block-start: .45em;
  inline-size: .55rem;
  block-size: .55rem;
  border-radius: 50%;
  background: currentColor;
}

Cost and verification

The extra generated box has negligible cost for a short timeline. Thousands of ornamented items can add paint work, so virtualize or paginate based on measured use rather than assuming every item must be present. The inherited currentColor keeps the dot aligned with the entry's text color, but the text must still communicate status. Test with high contrast and print settings; a lost dot should never make the sequence unreadable. If the dot needs its own interactive behavior, it must be real markup, not generated content.

Common Mistakes

  • Do not put an incident number in content: and omit it from the document.
  • Do not make decorative pseudo-elements capture pointer interactions.
  • Do not position a marker against a fixed text height.

Connected lessons

Related component decisions

css
selectors
web
Storage details