将文本转换为图标，内容仅作为CSS的工具提示

我试图将超链接转换为图标，同时将内容文本转换为工具提示。问题是我工作的地方只有CSS，我不能修改HTML或添加任何Javascript。我正在从表中的外部源检索数据，其中一列是超链接——我想将其转换为一个图标，并将文本内容作为工具提示方式悬停

下面是我所取得的成绩，有没有办法让

：hover

部分的外观、感觉和行为更像一个工具提示？或者有没有其他方法可以完全实现我的目标

。外部链接{
字号：0；
}
.外部链接：之后{
内容：''；
背景：url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196)不重复；
显示：内联块；
高度：32px；
宽度：32px；
}
.外部链接：悬停{
/*嗯，它显示了文本，但它既不美观也不实用*/
字号：首字母；
}

---

您可以像下面这样编辑css。只是一些想法。不确定是否可以将工具提示文本写入css

。外部链接{
字号：0；
位置：相对位置；
}
.外部链接：之后{
内容：''；
背景：url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196)不重复；
显示：内联块；
高度：32px；
宽度：32px；
}
.外部链接：之前{
内容：“文本”；
位置：绝对位置；
显示：内联块；
高度：自动；
填充物：2px 5px；
宽度：100%；
显示：无；
颜色：白色；
字号：首字母；
背景：#00000099；
底部：-15px；
}
.外部链接：悬停：之前{
/*嗯，它显示了文本，但它既不美观也不实用*/
显示：块；
}

---

这有点棘手，但是可以通过在之前和之后修改伪元素来实现。您只需在

content

属性中编写工具提示内容，否则，您应该修改HMTL本身

所以您的最终代码应该是这样的：

。外部链接{
字号：0；
}
.外部链接：：之前{
内容：“堆栈溢出”；
可见性：隐藏；
宽度：120px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
填充：5px0；
边界半径：6px；
/*定位工具提示文本*/
位置：绝对位置；
左：40px；
z指数：1；
/*淡入工具提示*/
不透明度：0；
过渡：不透明度0.3s；
}
.外部链接：：之后{
内容：''；
背景：url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196)不重复；
显示：内联块；
高度：32px；
宽度：32px；
}
.external link:hover.external link:：before{
/*嗯，它显示了文本，但它既不美观也不实用*/
字号：首字母；
能见度：可见；
不透明度：1；
}

---

谢谢！我现在明白了，我没有指定我正在寻找一种动态的方式-即内容应该始终是任何内容已经是。。。我将相应地更新问题！非常感谢。我现在明白了，我没有指定我正在寻找一种动态的方式-即内容应该始终是任何内容已经是。。。我将相应地更新问题，如果不可能，请将您的答案标记为已接受。@happytrooper不幸的是，如果您有这样一个元素，则无法根据HTML生成工具提示文本，您应该更改HTML结构或使用JS来实现此目的。谢谢@SMAKSS！标记为已接受-无法提升投票/标记为有用，因为我的声誉太低（很遗憾：）