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; content: url(../images/icon-pdf-link.gif);}

Is it possible to put some title and alt attributes on this image? I would like it so that the user is able to hover over the icon and get some text like “This links to a .pdf file.” Which I’ve typically done just by putting title attributes to it, but can’t figure out if I can do that through this method.

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.