css - 缩写标签的标题可以设置样式吗？

Question

采用以下代码:

<abbr title="World Health Organization">WHO</abbr>

我们可以设置缩写标签标题的样式吗？那么我们可以使用标题而不是自定义工具提示吗？

Answer 1

实际上，Alex Mcp 的回答是错误的。对于现代浏览器，使用 CSS 完全可以做到这一点。但是，可以使用带有 JavaScript 的旧浏览器的回退。

abbr {
    position: relative;
}

abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: yellow;
    content: attr(title);
}

当 abbr 标签悬停在上面时，这将使用标题中的属性内容在 abbr 标签的右上角添加一个绝对定位的伪元素。