Dokumentacja CSS z przykładami: ::before i ::after

Q: Dlaczego mój ::before albo ::after się nie wyświetla?

Najczęstszy powód to brak właściwości content: bez niej pseudoelement nie powstaje. Dla pustego pudełka dekoracyjnego użyj content: "". Inne przyczyny: liniowy pseudoelement z szerokością i wysokością (nadaj mu display: block albo inline-block) albo element taki jak czy , który nie może ich zawierać.

Q: Czym różni się :before od ::before?

Działaniem niczym. ::before z dwoma dwukropkami to aktualna składnia oznaczająca pseudoelementy; :before z jednym dwukropkiem to starszy zapis z CSS2, który przeglądarki nadal akceptują dla before, after, first-line i first-letter.

Q: Czy czytniki ekranu odczytują treść z CSS ::before?

Zazwyczaj tak: tekst z content zwykle trafia do dostępnej nazwy, ale nie da się go zaznaczyć ani skopiować. Prawdziwe informacje trzymaj w HTML, a pseudoelementów używaj do dekoracji i drobnych wskazówek wizualnych.

Co robią ::before i ::after

::before wstawia pudełko jako pierwsze dziecko elementu, a ::after jako ostatnie dziecko. Zawartość pudełka ustala właściwość content. Do HTML nic nie jest dodawane: przeglądarka generuje to z CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

HTML zawiera tylko 9 i Tests pass. Znak dolara, etykieta "/ month" i znaczek zaznaczenia pochodzą z CSS. Dziedziczą style elementu (czcionkę, kolor), chyba że je nadpiszesz, tak jak w przykładach powyżej.

Składnia

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

Wartość `content`	Wynik
`"text"`	Tekst. Użyj `"\A"` dla złamania linii (z `white-space: pre`), `"\2192"` dla znaku Unicode (→)
`""`	Puste pudełko na kształty i dekoracje
`attr(data-label)`	Wartość atrybutu elementu
`counter(step)`	Wartość licznika CSS
`open-quote` / `close-quote`	Cudzysłowy dla języka elementu
`none` albo `normal`	Brak pseudoelementu (`normal` to wartość domyślna)

content jest obowiązkowe. Bez niego ::before i ::after nigdy nie powstają, bez względu na to, ile innych właściwości im nadasz.

Kształty dekoracyjne z content: ""

Z content: "" pseudoelement jest pustym pudełkiem, któremu możesz nadać rozmiar i kolor. Domyślnie jest liniowy, a pudełko liniowe ignoruje width i height, więc nadaj mu display: block, inline-block albo position: absolute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Pozycjonowanie pseudoelementu

Dla dekoracji, która leży na elemencie albo wokół niego, użyj position: absolute na pseudoelemencie i position: relative na samym elemencie, żeby przesunięcia liczyły się od elementu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Zwróć uwagę na kolejność przy łączeniu z pseudoklasą: najpierw stan, potem pseudoelement, .link:hover::after, nigdy .link::after:hover.

Odczytywanie atrybutów przez attr(): podpowiedź

attr() wstawia wartość atrybutu do content, więc jedna reguła może pokazać inny tekst na każdym elemencie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Podpowiedź widoczna tylko po najechaniu kursorem jest niewidoczna dla osób korzystających z klawiatury i ekranu dotykowego. Ważne informacje umieść na stronie albo pokazuj je także przy :focus, dodając do elementu tabindex="0".

Numerowanie licznikami

Liczniki CSS razem z ::before numerują elementy bez wpisywania numerów:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Dodaj albo usuń krok, a numery same się zaktualizują.

Gdzie ::before i ::after nie działają

Pseudoelementy są wstawiane do wnętrza elementu, między jego znaczniki. Elementy, które nie mają na nie wnętrza, nie mogą ich pokazać:

<img>, <video>, <iframe> (elementy zastępowane)
<input>, <select>, <textarea> (kontrolki formularzy) oraz <br>

Niektóre przeglądarki rysują je na polu wyboru albo uszkodzonym obrazie, ale nie jest to spójne. Dodaj pseudoelement do opakowania: <span class="field"><input></span> i ostyluj .field::after.

Częste błędy

Brak content. Najczęstszy powód, dla którego nic się nie pokazuje. Dodaj content: "".
Nadawanie rozmiaru liniowemu pseudoelementowi. width i height nic nie robią, dopóki nie ustawisz display: block, inline-block albo position: absolute.
Zła kolejność ze stanem. a:hover::after działa; a::after:hover nie.
Pozycja absolutna bez pozycjonowanego rodzica. Pseudoelement wyrównuje się wtedy do jakiegoś odległego przodka. Dodaj do elementu position: relative.
Prawdziwa treść w CSS. Tekstu z content nie da się zaznaczyć ani skopiować. Informacje trzymaj w HTML.

Najczęściej zadawane pytania

Co robi ::before w CSS?

Tworzy pseudoelement, który jest pierwszym dzieckiem wybranego elementu i zawiera to, co podaje właściwość content. ::after robi to samo jako ostatnie dziecko. Żaden z nich nie istnieje w HTML, więc przydają się do ikon, etykiet i dekoracji.

Dlaczego mój ::before albo ::after się nie wyświetla?

Najczęstszy powód to brak właściwości content: bez niej pseudoelement nie powstaje. Dla pustego pudełka dekoracyjnego użyj content: "". Inne przyczyny: liniowy pseudoelement z szerokością i wysokością (nadaj mu display: block albo inline-block) albo element taki jak <img> czy <input>, który nie może ich zawierać.

Czym różni się :before od ::before?

Działaniem niczym. ::before z dwoma dwukropkami to aktualna składnia oznaczająca pseudoelementy; :before z jednym dwukropkiem to starszy zapis z CSS2, który przeglądarki nadal akceptują dla before, after, first-line i first-letter.

Czy mogę użyć ::before na img albo input?

Nie w sposób niezawodny. Pseudoelementy są wstawiane do wnętrza treści elementu, a elementy zastępowane, takie jak <img>, i kontrolki formularzy, takie jak <input>, nie mają na nie miejsca. Otocz element znacznikiem <span> albo <div> i dodaj pseudoelement do tego opakowania.

Czy czytniki ekranu odczytują treść z CSS ::before?

Zazwyczaj tak: tekst z content zwykle trafia do dostępnej nazwy, ale nie da się go zaznaczyć ani skopiować. Prawdziwe informacje trzymaj w HTML, a pseudoelementów używaj do dekoracji i drobnych wskazówek wizualnych.

Powiązane zagadnienia