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

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

a:link{文本装饰：无；
颜色：#000；
边框底部：2px实心#f00；}
a:悬停，a:活动
{文本装饰：无；
颜色：#f00；
边框底部：2px实心#f00；}
a:访问{文本装饰：无；
颜色：黑色；
边框底部：2个实心#888；}

---

更新

在最终弄清楚OP的意思是解决方案最初运行良好（只有一个例外）之后，属性

title

的默认行为不会被抑制，因此自定义工具提示后面会有一个额外的工具提示

解决方案是：如果没有JavaScript，不要使用

标题

属性，因为许多默认行为都是CSS无法控制的。但是不要气馁，因为有一种替代方法，你可以使用它，它不仅是有效的和语义的（如果标记正确的话），而且在功能上也是灵活的

使用属性（

*

=大写字母中的任何字符串，不带空格——请使用破折号。）

• 我们可以使用任意长度的任何字符串
• 我们可以给它取任何我们想要的名字（在前面提到的限制范围内）
• 我们可以在一个元素上有任意多个

  数据-*

  属性，并且
• …该元素可以是任何元素

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

---

将伪元素与值一起使用。它不仅限于

标题

，这很好，请看下面的代码片段

片段

div{
利润率：50像素；
位置：相对位置；
}
a:链接{
文字装饰：无；
颜色：#000；
边框底部：2px实心#f00；
}
a:参观了{
文字装饰：无；
颜色：黑色；
边框底部：2个实心#888；
}
a:悬停，
a:主动的{
文字装饰：无；
颜色：#f00；
边框底部：2px实心#f00；
}
a:悬停：：之后{
内容：attr（title）；
颜色：蓝色；
位置：绝对位置；
top:3ex；
左：-.5ch；
边框底部：0非透明；
}
a[名称]：悬停：：之后{
内容：attr（href）；
背景：黑色；
颜色：青色；
边框底部：0非透明；
}
a[目标]：悬停：：之后{
内容：attr（target）；
左：-1.5厘米；
背景：红色；
颜色：白色；
边框底部：0非透明；
}
a[数据节点]：悬停：：之后{
内容：attr（数据节点）；
左-4ch；
边框底部：0非透明；
背景：黑色；
颜色：金色；
}
a[数据任何内容]：悬停：：之后{
内容：attr（data-anything）；
左：0；
边框底部：0非透明；
颜色：紫色；
宽度：8厘米；
}

你不能。要做到这一点，您需要自定义工具提示。如果您不想使用自己的库，可以使用这些库。非常感谢，但它仍然显示默认的标题框和蓝色文本。@ruffle那么我一定误解了您的问题，请进一步解释。以您的第一个示例为例，我的意思是有蓝色文本，但不是默认的标题框，它显示在它的右下方。实现这一点的方法可能是使用跨度。你是说红线？这很烦人，我想我知道在那里该做什么……不，不是红线，尽管那很烦人。当我将鼠标悬停在“文本”上时，它下面会出现一个蓝色的“hello”，然后过了一会儿，默认的标题框（白色背景下的黑色文本）也会出现，同时也会显示“hello”。