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

You can this, these days, using CSS3.

According to https://www.w3.org/TR/css-content-3/#alt:

1.2. Alternative Text for Speech

Content intended for visual media sometimes needs alternative text for speech output. The content property thus accepts alternative text to be specified after a slash (/) after the last . If such alternative text is provided, it must be used for speech output instead.

This allows, for example, purely decorative text to be elided in speech output (by providing the empty string as alternative text), and allows authors to provide more readable alternatives to images, icons, or text-encoded symbols. Here the content property is an image, so the alt value is required to provide alternative text.

.new::before {
  content: url(./img/star.png) / "New!";
    /* or a localized attribute from the DOM: attr("data-alt") */
}

Answer 2

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.

Answer 3

Based on the answer I just did the following with jQuery:

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