Właściwość content

Właściwość content pozwala wstawiać do znaczników dowolny generowany tekst. Stosowana jest wraz z pseudoelementami after i before.

Składnia

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

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

Przykład

Dodajmy na początku i na końcu tekstu znacznika li dodatkowy 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::before {
  content: '!!!';
}
li::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::before {
  color: red;
  content: '!!!';
}
li::after {
  color: green;
  content: '???';
}

Результат:

Zobacz też