Propiedad content
La propiedad content permite insertar
texto generado arbitrario en las etiquetas. Se aplica
en conjunto con los pseudoelementos after
y before.
Sintaxis
selector::after {
content: 'texto';
}
selector::before {
content: 'texto';
}
Ejemplo
Insertemos texto adicional al principio y al final del texto de la etiqueta 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: '???';
}
:
Ejemplo
Se pueden aplicar varios estilos al texto insertado. Pintemos este texto, por ejemplo, de algún color:
<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: '???';
}
:
Véase también
-
la función
attr,
que obtiene el valor del atributo de la etiqueta -
la propiedad
counter-increment,
que establece numeración automática
