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.

Yes, but in the HTML, not in the CSS – pavium May 09 '11 at 22:30 — pavium, May 09 '11 at 22:30
Like @pavium said, via HTML OR Javascript (JQuery) etc... – robx May 09 '11 at 23:18 — robx, May 09 '11 at 23:18

BoltClock · Accepted Answer · 2012-01-06T03:54:32.813

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.

score 1 · Answer 2 · answered May 30 '18 at 15:44

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") */
}

In practice, as of May 2020, only Chrome has this implemented: https://caniuse.com/#feat=mdn-css_properties_content_alt_text. Safari has a `-webkit-alt` property apparently: https://bugs.webkit.org/show_bug.cgi?id=120188. Firefox bug for implementation: https://bugzilla.mozilla.org/show_bug.cgi?id=1483898. — Thibaud Colas, May 01 '20 at 17:37

score 0 · Answer 3 · answered Sep 05 '13 at 19:36

0

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' />");

answered Sep 05 '13 at 19:36

SventoryMang

9,656
12
66
103

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

3 Answers3

Linked