如何控制 HTML href 元素中标题文本的位置和颜色？

Question

使用 HTML 和 CSS，而不是 JS，如何更改在链接悬停时显示的标题文本的位置、文本颜色和背景颜色？我想将标题文本居中在链接文本的中点下方。

a:link {text-decoration: none;
color: #000;
border-bottom: 2px solid #f00;  }

a:hover, a:active
{text-decoration: none;
color: #f00;
border-bottom: 2px solid #f00;  }

a:visited {text-decoration: none;
color: black;
border-bottom: 2px solid #888;  }

<div>
<a href="#" title="hello">text</a>
</div>

Answer 1

更新

在最终弄清楚 OP 的意思是解决方案最初工作正常，但有一个例外之后，属性title的默认行为没有被抑制，因此在自定义工具提示之后会出现一个额外的工具提示。

解决方案是这样的：不要使用title没有 JavaScript的属性，你会受到许多无法用 CSS 控制的默认行为的支配。但是不要气馁，因为您可以使用一种替代方法，它不仅有效且语义化（如果标记正确），而且在功能上也很灵活。

使用data-*属性（*=任何小写的字符串，没有空格——改用破折号。）

• 我们可以使用任何长度的任何字符串
• 我们可以为它命名任何我们想要的名称（在前面规定的限制范围内）
• 我们可以data-*在一个元素上拥有尽可能多的属性，并且...
• ...那个元素可以是任何元素。

请参阅下面 Snippet 中的最后两个示例。

将::before和::after伪元素与attr()值一起使用。不限于title哪个好，看看下面的片段。

片段

div {
  margin: 50px;
  position: relative;
}
a:link {
  text-decoration: none;
  color: #000;
  border-bottom: 2px solid #f00;
}
a:visited {
  text-decoration: none;
  color: black;
  border-bottom: 2px solid #888;
}
a:hover,
a:active {
  text-decoration: none;
  color: #f00;
  border-bottom: 2px solid #f00;
}
a:hover::after {
  content: attr(title);
  color: blue;
  position: absolute;
  top: 3ex;
  left: -.5ch;
  border-bottom: 0 none transparent;
}
a[name]:hover::after {
  content: attr(href);
  background: black;
  color: cyan;
  border-bottom: 0 none transparent;
}
a[target]:hover::after {
  content: attr(target);
  left: -1.5ch;
  background: red;
  color: white;
  border-bottom: 0 none transparent;
}
a[data-node]:hover::after {
  content: attr(data-node);
  left: -4ch;
  border-bottom: 0 none transparent;
  background: black;
  color: gold;
}
a[data-anything]:hover::after {
  content: attr(data-anything);
  left: 0;
  border-bottom: 0 none transparent;
  color: purple;
  width: 8ch;
}

<div>
  <a href="#" title="hello">text</a>
</div>


<div>
  <a href="#" title="world!">text</a>
</div>


<div>
  <a href="h++p://nowhere.lost" name='destination'>Where do I go to?</a>
</div>

<div>
  <a href="#" target="#anchorPoint">Target</a>
</div>

<div>
  <a href="#" data-node="anyArbitraryString">Data-*</a>
</div>

<div>
  <a href="#" data-anything="For anything you want represented by a string">Use Data-*</a>
</div>