::before & ::after — Build a Tooltip
Pseudo-elements let you generate decoration in CSS without adding HTML. Combine them with absolute positioning to build a tooltip with no extra markup.
Step 1 of 2
Pseudo-elements are extra ghost children
The selectors ::before and ::after let you generate two extra child elements via CSS — one before the real content of the element and one after. They are perfect for decorative work: tooltip arrows, list bullet styling, quote marks around blockquotes, badges, dividers.
To make them appear, you must give them content: '' (an empty string is enough). Without content, the browser does not generate the pseudo-element at all.
Think of it this way: Think of
::before and ::after as the small decorative trim a tailor adds to a jacket — the lapel pin, the buttonhole stitching. They are not part of the jacket's structure, but they make it feel finished.Tip
Keep meaningful text in HTML, not in content. Screen readers do not read pseudo-element content reliably across browsers, so use it only for decoration.
Learn more on MDN
HTMLREAD ONLY
PREVIEW