soy Kseso y esto EsCSS

Propiedad content: Cómo usar caracteres especiales o símbolos a través de Css

Propiedad content: Cómo usar caracteres especiales o símbolos a través de Css

·Por Kseso ✎ 5

Un recordatorio, innecesario para la mayoría, pero por si acaso. La propiedad | content | sólo se puede declarar en los pseudoelementos | :before | y | after |. Y lo que va a hacer es generar contenido en el html.
Propiedad que entre otras cosillas, os permite añadir ya sea contenido o presentación sin tener que añadir nada en el html.

Como ejemplo en estás páginas tienes el caballo de ajedrez de la derecha, no es una imagen. Así como las bandas verticales de color de cada artículo.
El tipo de contenido dependerá del valor utilizado. Al final tienes una relación con los valores que admite.

Pero con esta propiedad ocurre que no procesa. Entonces, cómo hacer para que muestre caracteres raros/especiales con total garantía de que se mostrará el "dibujito" y no la entidad html o cualquier otra cosa?

La única forma de tener certeza plena de que no habrá sorpresas es utilizar la codificación css (valor hexadecimal en css) de cada carácter ASCII o entidad html. Para ello, lo mejor es utilizar alguna de las calculadoras o conversones de de entidades.
Como por ejemplo ésta.

Sencillo y sin adornos, si loquieres con más colorines y añadidos lo tienes aquí

Ahora sólo tienes que saber qué entidad tiene ese símbolo que quieres utilizar. Hay muchas utilidades para optenerlas. Una. Dos. Tres

Ideas para el uso de "content"

Una marca de validación a tus enlaces visitados:

a:visited:before { content: "\2713 ";}

Imprimir el destino de los enlaces en la versión impresa:

a:after { content: "(link: " attr(title) " )";}

Y qué me dices de lo feo que queda el hueco dejado por una imagen no cargada. Mejor, por partida doble, si en el html utilizamos el atributo longdesc y lo mostramos si la imagen falla:

img:after { content: 'DESCRIPCIÓN DE LA IMAGEN NO CARGADA: ' attr(longdesc); }

O para indicar de forma gráfica el mail o teléfono

Contactar: Micorreo@fail.com /// 555 555 555

.mail:before { content: "\2709"; } .phone:before { content: "\2706"; }

Valores de la propiedad | content |

cadena
Contenido del texto de la cadena.
uri
El valor es un URI que señala un recurso externo. Si una aplicación del usuario no puede soportar el recurso debido a los tipos de medios que soporta, debe ignorar el recurso. Nota. CSS no ofrece ningún mecanismo para cambiar el tamaño del objeto incrustado o para proporcionar una descripción textual, tal como los atributos "alt" o "longdesc" hacen con las imágenes en HTML. Esto puede cambiar en futuros niveles de CSS.
contador
Generan numeración automática. Los contadores pueden especificarse mediante dos funciones distintas: 'counter()' o 'counters()'.
open-quote y close-quote
Estos valores son reemplazados con la correspondiente cadena de la propiedad 'quotes'.
no-open-quote y no-close-quote
No inserta nada (una cadena vacía), pero incrementa (disminuye) el nivel de anidamiento de las comillas.
attr(X)
Esta función devuelve como una cadena el valor del atributo X del sujeto del selector. La cadena no es analizada por el procesador de CSS. Sustituye X por alt y obtienes el valor (contenido) en él. O el recurso muy utilizado en las hojas de estilos para impresión con href junto a los enlaces para que se imprima la dirección de ellos.

avatar del Editor del blog
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso