Pseudoelementet before

Pseudoelementet before indsætter tekst før et element. Bruges kun sammen med egenskaben content, som angiver den tekst, der skal indsættes.

Syntaks

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

Eksempel

Lad os gøre det sådan, at når man holder over li, indsættes teksten i begyndelsen:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

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

Результат:

Eksempel

Der kan anvendes forskellige stilarter til den indsatte tekst. Lad os for eksempel farve denne tekst i en eller anden farve:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

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

Результат:

Se også