The ::before pseudo-element creates a box that acts like the first child of the selected element. It is usually used with the content property to add decorative text or shapes.
It is inline by default. Prefer double-colon ::before (Selectors Level 3). Single-colon :before still works for older CSS2 syntax.
Not deprecated. Cross-browser since about July 2015.
Do not put important information only in ::before. Screen readers may skip generated content. Keep meaning in real HTML.
selector::before { content: …; /* required to render */ }Without a usable content value, the pseudo-element is not shown.
| Pattern | Description | Try it |
|---|---|---|
| Text prefix | content: "Note: " before the element text | Try it |
| Empty box | content: "" plus size/color for a decorative mark | Try it |
| Quotes | Insert opening quote characters | Try it |
| Unicode | Use an escape like \2605 for a star | Try it |
attr() | Pull a prefix from an HTML attribute | Try it |
:before | Legacy single-colon form (same idea) | Try it |
::beforePick an element, set content, then style the generated box.
p, h2, li, …).element::before { content: …; }.display as needed.Change the content string applied to ::before. Empty string still renders if you keep a decorative box.
Each snippet focuses on ::before plus content. Use Try It Yourself for a live editor.
Insert a short label before a paragraph.
<style>
p::before {
content: "Note: ";
font-weight: 700;
color: #dc2626;
}
</style>
<p>Save your work often.</p>p::before creates the first-child box.content. The string "Note: " is required to render.Use an empty string, then size and color a marker before the text.
<style>
.item::before {
content: "";
display: inline-block;
width: 0.65rem;
height: 0.65rem;
margin-right: 0.45rem;
background: #2563eb;
}
</style>
<p class="item">Feature highlight</p>content: "". Still creates a box, with no characters.inline-block lets you set width and height.margin-right separates the mark from the text.Add a decorative opening quotation mark before a quote.
<style>
q::before {
content: "«";
color: #2563eb;
margin-right: 0.15em;
}
</style>
<q>Practice makes progress.</q>q. The quote element gets a generated first child.«. That character is only styling, not HTML text.::after. Closing marks usually use ::after.Most “broken” ::before rules are missing content or targeting the wrong element type.
If content is omitted, none, or normal, the pseudo-element is not rendered.
img, input, and similar replaced elements generally cannot generate ::before. Wrap them in a span or div.
Generated content is unreliable for screen readers. Put labels and warnings in real markup.
Use a literal character or a Unicode escape (\2605), not ☆.
::after paints laterWith the same stacking context, ::after content usually appears above ::before because it is rendered later.
::before is a browser CSS pseudo-element. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers and IE 8+ (as :before / ::before). Widely available since July 2015.
Bottom line: Safe for decorative UI everywhere. Prefer ::before spelling. It is not a runtime API.
content or nothing appears.One line: use ::before with content to decorate the start of an element.
Style the first letter of a block for drop-cap effects.
8 people found this page helpful