The CSS ::before selector
The CSS ::before pseudo-element inserts generated content at the very start of an element, controlled by the content property — .note::before { content: "★ "; } adds an icon before the text. It requires a content value (even an empty "") to appear, and the content is decorative, so keep meaning out of it.
Overview
::before creates a pseudo-element — an extra box the browser inserts as the first child of the element you target. You fill it with the content property: .tip::before { content: "★ "; } prepends a star to every tip. Nothing appears without a content value, and a common trick is content: "" (an empty string) to create a purely decorative shape you then size and style.
It is endlessly handy for decorative touches: icons before labels, custom bullets, quotation marks around a blockquote, little badges and arrows, and decorative shapes built with an empty content plus a background. Its twin ::after does the same at the end of the element.
The important rule is that generated content is decorative. Screen-reader support for reading it is inconsistent, so never put information a user actually needs into ::before — no essential text, no meaning that is not also in the real markup. Use it for visual polish, and keep content that matters in the HTML.
Syntax
/* requires a content value to render */
.note::before {
content: "★ ";
}
/* decorative shape with empty content */
.divider::before {
content: "";
display: block;
height: 2px;
background: #1c7ce9;
}Example
<style>
.note { background: #eff6ff; padding: 12px 16px; border-radius: 8px; font: 15px system-ui, sans-serif; }
.note::before { content: "★ "; }
.badge::after { content: " ✓"; color: #16a34a; font-weight: 700; }
</style>
<p class="note">A tip, with a lightbulb added by ::before.</p>
<p class="badge">Saved</p>Best practices
- Always set the
contentproperty — evencontent: ""— or the pseudo-element will not appear. - Keep generated content decorative; never put essential information in
::before. - Use an empty
contentwith a background and size to build decorative shapes, arrows and dividers. - Reach for ::after for the same idea at the end of the element.
Accessibility
Whether assistive technology announces generated content is inconsistent across browsers and screen readers, so it must never carry meaning a user depends on. An icon or label added through ::before can be ignored entirely — fine for decoration, a problem if it was the only thing conveying status or instruction. Keep essential text in the real markup, and treat ::before as visual garnish.
Frequently asked questions
What does ::before do in CSS?
content property, e.g. .note::before { content: "★ "; }.Why is my ::before not showing?
content property to render. Add at least content: ""; without it the pseudo-element does not appear.What is the difference between ::before and ::after?
::before inserts content at the start of the element; ::after inserts it at the end.