将title / alt属性放入CSS：{content：image}之后？

Question

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

a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);}

是否可以在此图片上添加一些title和alt属性？我希望它能让用户将鼠标悬停在图标上并获得一些文本，例如“这链接到.pdf文件。”我通常只是将标题属性添加到其中，但无法弄清楚如果我能通过这种方法做到这一点。

Answer 1

不，content只接受原始文字和图片数据，而不是HTML。

您需要使用JavaScript动态地向现有HTML元素添加工具提示。

对于图标，您可以使用背景图片和一些填充：

a.pdf-link {
    padding-left: 2px;
    padding-right: 20px;
    background: url(../images/icon-pdf-link.gif) right center no-repeat;
}

但是，如果您只需要在图标上专门提供工具提示，则需要按照评论的说法在JavaScript中执行所有操作。

Answer 2

这些天你可以使用CSS3。

根据https://www.w3.org/TR/css-content-3/#alt：

<强> 1.2。演讲的替代文字

用于视觉媒体的内容有时需要用于语音输出的替代文本。因此，content属性接受在最后一个之后的斜杠（/）之后指定的替代文本。如果提供了这样的替代文本，则必须将其用于语音输出。

例如，这允许在语音输出中省略纯装饰性文本（通过提供空字符串作为替代文本），并且允许作者提供图像，图标或文本编码符号的更可读的替代方案。 这里的content属性是一个图像，因此需要alt值来提供替代文本。

.new::before {
  content: url(./img/star.png) / "New!";
    /* or a localized attribute from the DOM: attr("data-alt") */
}

Answer 3

基于答案，我刚刚使用jQuery执行了以下操作：

$(".pdf-link").before("<img src='../images/icon-pdf-link.gif' title='This link is a pdf' />");