如何控制 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-* 属性...
• ...该元素可以是任何元素。

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

---

使用带有attr() 值的::before and ::after 伪元素。不限于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>