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.

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 Don Kseso Kseso

Comentarios: 5

  1. img:after

    no funciona

    img no es un objeto de contenido

    ResponderEliminar
  2. Hola Luis
    En realidad si funciona. Sólo tienes que cargar una imagen inexistente para ver que la descripción está ahí, debajo (eje z) de ella.

    Siendo puristas ::before y ::after se definen como "antes o después del contenido del elemento". Y siendo como es el elemento <img ... /> un elemento vacío no se mostrará el content. Pero sí ha sido procesado y está ahí. Sólo que inaccesible.
    Dicho de "aquella forma" ;-)

    Puedes ver una demo en este jsfiddle

    Eso sí, Chrome en su versión actual no lo muestra. No recuerdo si en las primeras versiones lo hacía. Tampoco se si será un bug al igual que no anima los pseudo, su forma de tratar el DOM y shadowDom o qué.

    Un saludo

    ResponderEliminar
  3. Estamos de acuerdo. Primero hay que "dotar de contenido textual" a la imagen y posteriormente se le añade el resto de contenido "delante" o "detras".

    La idea es que en un "@media print" junto a la imagen aparezca su "alt".
    Lo máximo que he conseguido es quitar el contenido a la imagen para luego asignarle el texto y otra vez la imagen. Lo que aun no he conseguido es que se interprete de nuevo el src como src del nuevo contenido:
    ...
    1 img { content: '' ; }
    2 img:after {content: url('foto.jpg');}
    3 img:before { content: attr(alt) ;}
    ...

    lo ideal seria algo como :

    2 img:after {content: url(src);}

    Pero no lo encuentro. He mirado las variables y extracción de cadenas de caracteres, pero no doy con ello.
    Al final tendré que recurrir al Javascript
    Gracias

    ResponderEliminar
  4. Si lo quieres para que en el print te aparezca una "leyenda" sobre la imagen yo iría por otro camino. Mira a ver si esta idea así a bote pronto pueda servirte de orientación:

    Usa un marcado distinto:
    <figure>
    <img src="ruta/nombre.ext" alt="" />
    <figcaption>Pie de imagen</figcaption>
    </figure>

    Y a partir de ahí si quieres puedes ocultar el figcaption en media="screen" y mostrarlo al imprimir.

    Creo que sería mejor experimentar con esta forma que con ::after, visto las limitaciones de su uso en elementos vacíos.

    Un saludo

    ResponderEliminar
  5. Sí, gracias, algo así tendrá que ser.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap