Pseudoelement after

Pseudoelement after wstawia tekst po elemencie. Używany jest tylko wspólnie z właściwością content, która określa tekst, który należy wstawić.

Składnia

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

Przykład

Sprawmy, aby po najechaniu na li na jego końcu 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::after {
  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::after {
  color: red;
  content: '!!!';
}

Результат:

Zobacz też