A before pszeudoelem

A before pszeudoelem szöveget szúr be egy elem elé. Csak a content tulajdonsággal együtt használható, amely megadja a beszúrandó szöveget.

Szintaxis

cssszelektor::before {
  content: 'szöveg';
}

Példa

Tegyük fel, hogy amikor az egér rámutat egy li elemre, a elejébe szöveg kerüljön:

html<ul>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ul>

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

Результат:

Példa

A beszúrt szövegre különböző stílusokat alkalmazhatunk. Például színezzük pirosra ezt a szöveget:

html<ul>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ul>

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

Результат:

Lásd még