Псевдоелемент before

Псевдоелементът before вмъква текст преди елемент. Използва се само заедно със свойството 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:hover::before {
  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:hover::before {
  color: red;
  content: '!!!';
}

Результат:

Вижте също