将title / alt属性放入CSS：{content：image}之后？ [英] Put title/alt attributes into CSS :after { content: image }?

问题描述

我有以下CSS在任何链接到PDF的链接上添加PDF图标：

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);}

可能在这个图像上放一些标题和alt属性？我想这样，用户可以将鼠标悬停在图标上，并得到一些文本，例如这个链接到.pdf文件。我通常做的只是把标题属性，但无法弄清楚

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.

推荐答案

不，内容

您需要使用JavaScript将动态添加工具提示到现有的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;
}

如果你需要专门在图标上有一个工具提示，需要在JavaScript中做所有的事情，如评论说的。

If you need to specifically have a tooltip only on the icon, though, you need to do everything in JavaScript as the comments say.

这篇关于将title / alt属性放入CSS：{content：image}之后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！