css - 将 title/alt 属性放入 CSS :after { content: image }?

Question

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

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

是否可以在此图像上放置一些标题和 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. 语音替代文本

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

例如，这允许在语音输出中省略纯粹的装饰性文本（通过提供空字符串作为替代文本），并允许作者为图像、图标或文本编码符号提供更具可读性的替代方案。这里的内容属性是一个图像，因此需要 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' />");