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