Cómo utilizar entidades HTML en el contenido generado por CSS

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 \.

Sabiendo que la entidad « corresponde al código 00AB y la entidad » al código 00BB, el anterior ejemplo CSS se puede rehacer de la siguiente manera:

blockquote:before {
  content: "\00AB";
}
blockquote:after {
  content: "\00BB";
}

El código numérico de las entidades corresponde al código Unicode definido en el estándar ISO 10646. Puedes consultar una lista de la mayoría de códigos en esta página de la Wikipedia. La siguiente tabla muestra algunos de los caracteres más utilizados:

Dentro de una misma propiedad content puedes añadir tantas entidades como quieras, tal y como muestra el siguiente ejemplo, que añade dos espacios en blanco y una flecha hacia la derecha a cada elemento de las listas:

ul li:before {
  content: "\00A0 \2192 \00A0";
}