Poner atributos title/alt en CSS: después de {content: image}?

Question

Tengo el siguiente CSS para agregar un icono PDF para cualquier vínculo que une a un PDF:

a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);} 

¿Es posible poner un poco de título y atributos alt en esta imagen? Me gustaría que el usuario pueda pasar el cursor sobre el ícono y obtener un texto como "Esto enlaza con un archivo .pdf". Lo que he hecho típicamente es solo ponerle atributos de título, pero no puedo entenderlo si puedo hacer eso a través de este método.

Answer 1

No, content solo acepta datos de texto sin procesar e imágenes, no HTML.

Necesita usar JavaScript para agregar dinámicamente información sobre herramientas a sus elementos HTML existentes.

En cuanto al icono, se puede utilizar una imagen de fondo y algo de relleno:

a.pdf-link { 
    padding-left: 2px; 
    padding-right: 20px; 
    background: url(../images/icon-pdf-link.gif) right center no-repeat; 
} 

Si es necesario tener específicamente un texto de ayuda única en el icono, sin embargo, usted tiene que hacer todo en JavaScript como el los comentarios dicen

Answer 2

Sobre la base de la respuesta que acabo de hacer lo siguiente con jQuery:

$(".pdf-link").before("<img src='../images/icon-pdf-link.gif' title='This link is a pdf' />");