Pseudo-element before

Pseudo-element before vkladá text pred element. Používa sa iba spolu s vlastnosťou content, ktorá určuje text, ktorý sa má vložiť.

Syntax

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

Príklad

Urobme tak, aby sa pri nájdení myšou na li na jeho začiatok vložil text:

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

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

Результат:

Príklad

K vloženému textu je možné aplikovať rôzne štýly. Zafarbime napríklad tento text na nejakú farbu:

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

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

Результат:

Pozri tiež