Psevdoelement before

Psevdoelement before vstavi besedilo pred elementom. Uporablja se samo skupaj z lastnostjo content, ki določa besedilo, ki ga je treba vstaviti.

Sintaksa

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

Primer

Naredimo tako, da se ob prikazovanju miške na li na začetek vstavi besedilo:

html<ul>
  <li>seznamska postavka</li>
  <li>seznamska postavka</li>
  <li>seznamska postavka</li>
  <li>seznamska postavka</li>
  <li>seznamska postavka</li>
</ul>

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

Результат:

Primer

K vstavljenemu besedilu lahko uporabimo različne stile. Pobarvajmo na primer to besedilo v kakšno barvo:

html<ul>
  <li>seznamska postavka</li>
  <li>seznamska postavka</li>
  <li>seznamska postavka</li>
  <li>seznamska postavka</li>
  <li>seznamska postavka</li>
</ul>

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

Результат:

Glejte tudi