Pseudoelement before

Pseudoelement before vkládá text před element. Používá se pouze společně se vlastností content, která určuje text, který má být vložen.

Syntaxe

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

Příklad

Pojďme zařídit, aby se při najetí na li na jeho začátek vložil text:

html<ul>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
</ul>

cssli:hover::before {
  content: '!!!';
}

Результат:

Příklad

K vkládanému textu lze aplikovat různé styly. Obarvíme například tento text nějakou barvou:

html<ul>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
</ul>

cssli:hover::before {
  color: red;
  content: '!!!';
}

Результат:

Viz také