仅使用 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>