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

css title pseudo-element alt
SventoryMang picture SventoryMang · May 10, 2011 · Viewed 8.8k times · Source

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

BoltClock picture BoltClock · May 10, 2011

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.

Related questions

CSS: before / after content with title

I can do div:after { content: "hello" } But can I have the hello text with a title so that when I hover it with the mouse, the title is displayed? Thanks

Read More
Styling native tooltip from title="Tooltip text"

Example: <a href="example.com" title="My site"> Link </a> How do I change the presentation of the "title" attribute in the browser?. By default, it just has yellow background and small font. I would like …

Read More
Is it possible to hide the title from a link with CSS?

I have an anchor element with a title attribute. I want to hide the popup that appears when hovering over it in the browser window. In my case, it is not possible to do something like this, $("a").attr("title", ""); …

Read More