Уласцівасць content

Уласцівасць content дазваляе ўстаўляць у тэгі адвольны тэкст, які генеруецца. Ужываецца разам з псеўдаэлементамі after і before.

Сінтаксіс

cssселектар::after {
  content: 'тэкст';
}

cssселектар::before {
  content: 'тэкст';
}

Прыклад

Давайце ў пачатак і канец тэксту тэга li ўставім дадатковы тэкст:

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: '???';
}

Результат:

Прыклад

Да ўстаўляемага тэксту можна ўжываць розныя стылі. Пафарбуем, напрыклад, гэты тэкст у які-небудзь колер:

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: '???';
}

Результат:

Глядзіце таксама