La propiedad content de CSS permite añadir dinámicamente contenidos en las páginas HTML. Aunque siempre debe utilizarse con moderación, es una solución muy útil para añadir pequeños contenidos sin tener que modificar la página HTML y sin tener que utilizar JavaScript para manipular la página.
El siguiente ejemplo añade la palabra Capítulo delante de cada título de sección de tipo <h1>:
h1:before {
content: "Capítulo ";
}
El problema puede surgir al utilizar dentro de la propiedad content caracteres especiales como símbolos de puntuación y otros elementos gráficos. Imagina que quieres encerrar los elementos <blockquote> con las comillas tipográficas « y »:
blockquote:before {
content: "«";
}
blockquote:after {
content: "»";
}
Este ejemplo funciona correctamente, pero es posible que deje de funcionar en el futuro. El motivo es que los caracteres especiales se han escrito directamente en el archivo CSS. Así que si en el futuro alguien abre este archivo CSS con un editor que no soporta bien la codificación UTF-8 o si la persona que edita este archivo no tiene cuidado, esos caracteres se perderán y la página ya no se verá bien.
La solución obviamente consiste en utilizar las entidades HTML, que sólo están formadas por caracteres seguros y que nunca se perderán ni causarán problemas. Como la entidad HTML de « es « y la de » es », la solución parece tan sencilla como utilizar el siguiente código:
blockquote:before {
content: "«";
}
blockquote:after {
content: "»";
}
Si pruebas ahora la página, verás que las entidades HTML se muestran tal y como están escritas, por lo que en vez de «, en la página se ve «. Para incluir una entidad HTML en la propiedad content, no utilices el nombre de la entidad, sino su código numérico precedido por el carácter \.
Sigue aprendiendo más en el siguiente enlace
No hay comentarios:
Publicar un comentario