Put title/alt attributes into CSS :after { content: image }?

Question

I’ve got the following CSS to add a PDF icon to any link that links to a PDF:

a.pdf-link:after { padding-left: 2px; conte         


        

Answer 1

No, content only accepts raw text and image data, not HTML.

You need to use JavaScript to dynamically add tooltips to your existing HTML elements.

As for the icon, you could use a background image and some padding:

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

If you need to specifically have a tooltip only on the icon, though, you need to do everything in JavaScript as the comments say.