html - 如何更改 anchor 标记内 title 属性的样式？

Question

例子:

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

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

是否有 CSS 方法来设置标题属性的样式？

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>

更新 w/来自@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