Pseudoelement before

Pseudoelement before wstawia tekst przed elementem. Używany jest wyłącznie razem z właściwością content, która określa tekst do wstawienia.

Składnia

cssselektor::before {
  content: 'tekst';
}

Przykład

Sprawmy, aby po najechaniu na li na początku został wstawiony tekst:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:hover::before {
  content: '!!!';
}

Результат:

Przykład

Do wstawianego tekstu można stosować różne style. Pokolorujmy na przykład ten tekst na jakikolwiek kolor:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:hover::before {
  color: red;
  content: '!!!';
}

Результат:

Zobacz też