如何更改锚标记内 title 属性的样式？

Question

例子：

 <a href="example.com" title="My site"> Link </a>

如何更改浏览器中“title”属性的显示？默认情况下，它只有黄色背景和小字体。我想让它变大并改变背景颜色。

是否有一种 CSS 方法来设置 title 属性的样式？

原文由 Kunpha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

似乎实际上有一个纯 CSS 解决方案，只需要 css attr 表达式、生成的内容和属性选择器（这表明它可以追溯到 IE8）：

https://jsfiddle.net/z42r2vv0/2/

 a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}

 <a href="http://www.google.com/" title="Hello world!">
  Hover over me
</a>

使用来自@ViROscar 的输入进行 更新：请注意，没有必要使用任何特定属性，尽管我在上面的示例中使用了“title”属性；实际上我的建议是使用“alt”属性，因为无法从 CSS 中获益的用户有可能访问内容。

再次更新 我没有更改代码，因为“title”属性基本上意味着“tooltip”属性，将重要文本隐藏在只能在悬停时访问的字段中可能不是一个好主意，但如果你有兴趣使此文本可访问，“aria-label”属性似乎是它的最佳位置： https ://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

原文由 Jon z 发布，翻译遵循 CC BY-SA 4.0 许可协议