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

Question

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

下面截取的是我走了多远，有没有办法让:hover部分的外观、感觉和行为更像工具提示？或者也许有另一种方法可以完全实现我所追求的？

.external-link {
font-size: 0;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
}

<a href="https://www.stackoverflow.com/" class="external-link">Stack Overflow</a>

Answer 1

这有点棘手，但可以通过修改before和after伪元素来实现。您只需要在content属性中编写工具提示内容，否则，您应该修改 HMTL 本身。

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

.external-link {
font-size: 0;
}
.external-link::before {
content: 'Stack Overflow';
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
left: 40px;
z-index: 1;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.external-link::after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover.external-link::before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
visibility: visible;
opacity: 1;
}

<a href="https://www.stackoverflow.com/" class="external-link">Stack Overflow</a>

Answer 2

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

.external-link {
font-size: 0;
position: relative;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:before {
content: 'Text';
position: absolute;
display: inline-block;
height: auto;
padding: 2px 5px;
width: 100%;
display:none;
color: white;
font-size:initial;
background: #00000099;
bottom: -15px;
}
.external-link:hover:before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
display:block;
}

<a href="https://www.stackoverflow.com/" class="external-link">Stack Overflow</a>