Pseudoelementul before

Pseudoelementul before inserează text înaintea elementului. Este utilizat doar împreună cu proprietatea content, care specifică textul care trebuie inserat.

Sintaxă

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

Exemplu

Să facem astfel încât la trecerea cursorului peste li să i se insereze text la început:

html<ul>
  <li>element de listă</li>
  <li>element de listă</li>
  <li>element de listă</li>
  <li>element de listă</li>
  <li>element de listă</li>
</ul>

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

Результат:

Exemplu

Textului inserat i se pot aplica diverse stiluri. Să-l colorăm, de exemplu, într-o culoare oarecare:

html<ul>
  <li>element de listă</li>
  <li>element de listă</li>
  <li>element de listă</li>
  <li>element de listă</li>
  <li>element de listă</li>
</ul>

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

Результат:

Vedeți și