Proprietà content
La proprietà content consente di inserire
nei tag testo generato arbitrariamente. Viene applicata
insieme agli pseudoelementi after
e before.
Sintassi
selettore::after {
content: 'testo';
}
selettore::before {
content: 'testo';
}
Esempio
Inseriamo del testo aggiuntivo all'inizio e alla fine
del testo del tag li:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li::before {
content: '!!!';
}
li::after {
content: '???';
}
:
Esempio
È possibile applicare vari stili al testo inserito. Coloriamo, ad esempio, questo testo con un colore:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li::before {
color: red;
content: '!!!';
}
li::after {
color: green;
content: '???';
}
:
Vedi anche
-
la funzione
attr,
che ottiene il valore dell'attributo del tag -
la proprietà
counter-increment,
che imposta la numerazione automatica
