HTML & CSS reference

::before

Creates a virtual first child of the element — for decorative text or shapes.

Syntax

selector::before { content: "…"; }

Examples

Text in front of the content:

<style>
  .tip::before { content: "Tip: "; font-weight: bold; color: seagreen; }
</style>
 
<p class="tip">Save your work often.</p>

A decorative circle with empty content:

<style>
  .dot::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    background: limegreen;
  }
</style>
 
<p class="dot">Online</p>

Notes

Without the content property the pseudo-element does not appear at all — even an empty content: "" is needed. Pseudo-elements do not work on elements without content, such as <img> and <input>. Do not put important text in ::before: it cannot be selected, and not every screen reader reads it.

Related recipes

In the tutorial

Pseudo-elements — How to style part of an element or add decorative content — before, after, first-letter, marker, placeholder and selection.

Thanks for reading!