The before pseudo-element

The before pseudo-element inserts a text before an element. It is used only in conjunction with the content property, which specifies the text to insert.

Syntax

cssselector::before {
  content: 'text';
}

Example

Let's make it so that when you hover over li, text is inserted at the start of it:

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

Результат:

Example

You can apply different styles to the inserted text. Let's color this text in some color, for example:

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

Результат:

See also