Pseudoelemento before

Il pseudoelemento before inserisce testo prima di un elemento. Viene utilizzato solo insieme alla proprietà content, che specifica il testo da inserire.

Sintassi

cssselettore::before {
  content: 'testo';
}

Esempio

Facciamo in modo che quando si passa il mouse su li all'inizio venga inserito il testo:

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: '!!!';
}

Результат:

Esempio

Al testo inserito si possono applicare vari stili. Coloriamo, ad esempio, questo testo con un colore:

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: '!!!';
}

Результат:

Vedi anche