::before

Tworzy wirtualny element na początku zawartości elementu. Służy do ikon, ozdobników i etykiet bez dodatkowego HTML.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Typowe zastosowania
Typowe zastosowania w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.alert {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert::before {
  content: "!";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f59e0b;
  color: #0c0c10;
  font-weight: 800;
}

Podgląd

Definicja i zastosowanie

Pseudoelement ::before wstawia do elementu nowe, pierwsze dziecko, którego nie ma w HTML. Nie powstaje przed elementem, tylko w jego środku, przed całą resztą treści. Domyślnie jest elementem liniowym (inline), ale możesz nadać mu dowolny display, rozmiar, tło i pozycję.

Warunkiem jego istnienia jest właściwość content. Bez niej pseudoelement w ogóle nie powstanie, dlatego nawet czysto dekoracyjny kształt potrzebuje content: "". W content możesz wstawić tekst, symbol, wartość atrybutu (attr(data-label)) albo licznik.

Zwykle nie zadziała w elementach, które nie mają własnej zawartości, takich jak <img>, <input> czy <br>, bo nie ma w nich miejsca na dodatkowe dziecko. Starszy zapis z jednym dwukropkiem (:before) nadal działa, ale dwa dwukropki odróżniają pseudoelementy od pseudoklas.

Treść z content bywa odczytywana przez czytniki ekranu, ale nie da się jej zaznaczyć ani skopiować. Używaj jej do dekoracji, a ważne informacje zostaw w HTML.

Składnia

selektor::before { content: …; }

Typowe zastosowania

content: "★ "
Symbol przed tekstem. Spacja w cudzysłowie oddziela go od treści.
content: attr(data-level)
Treść pobrana z atrybutu data-level elementu. Zmienisz atrybut w HTML, zmieni się etykieta.
display: inline-block
Pusta treść i własne wymiary dają kropkę statusu. Bez content: "" kropka by nie powstała.
position: absolute
Pozycjonowany pseudoelement rysuje pasek przy lewej krawędzi, niezależnie od długości tekstu.

Zapis	Opis
content: "★ "	Symbol przed tekstem. Spacja w cudzysłowie oddziela go od treści.
content: attr(data-level)	Treść pobrana z atrybutu `data-level` elementu. Zmienisz atrybut w HTML, zmieni się etykieta.
display: inline-block	Pusta treść i własne wymiary dają kropkę statusu. Bez `content: ""` kropka by nie powstała.
position: absolute	Pozycjonowany pseudoelement rysuje pasek przy lewej krawędzi, niezależnie od długości tekstu.

Typowe zastosowania w praktyce

content: "★ "

Symbol przed tekstem. Spacja w cudzysłowie oddziela go od treści.

.demo::before { content: "★ "; color: #fbbf24; }

content: attr(data-level)

Treść pobrana z atrybutu data-level elementu. Zmienisz atrybut w HTML, zmieni się etykieta.

.demo::before {
  content: attr(data-level);
  margin-right: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #7c3aed;
  font-size: 12px;
  font-weight: 700;
}

display: inline-block

Pusta treść i własne wymiary dają kropkę statusu. Bez content: "" kropka by nie powstała.

.demo::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #10b981;
}

position: absolute

Pozycjonowany pseudoelement rysuje pasek przy lewej krawędzi, niezależnie od długości tekstu.

.demo { position: relative; padding-left: 14px; }
.demo::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 4px;
  background: #a78bfa;
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Każdy pseudoelement potrzebuje content. Jeśli coś się nie pokazuje, najpierw sprawdź, czy ta deklaracja jest na miejscu.
Pozycjonując ::before absolutnie, nadaj rodzicowi position: relative. Inaczej pseudoelement ustawi się względem innego przodka.
Do własnych punktorów list wygodniejszy bywa ::marker albo list-style-type. ::before zostaw na ozdobniki, których lista nie przewiduje.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs