时间戳

首页 > 解决方案 > CSS自定义工具提示字体真棒图像消失

html - CSS自定义工具提示字体真棒图像消失

问题描述

我有以下 CSS，它根据元素名称在某些文本之前显示字体真棒图像，并在该文本下划线。这是为了鼓励用户将鼠标悬停在上面以获得更多解释。

x-help {
    border-bottom: 3px solid #f00;
}

x-help::before {
        content: "\f059";
        font-family: 'Font Awesome\ 5 Free';
        text-decoration: inherit;
        padding-right: 0.5em;
        position: relative;
    }

我还有以下 CSS，它在悬停时显示自定义工具提示，所有这些都很好，除非原始文本悬停在字体真棒图像上消失。

x-help{
    position: relative;
}

    x-help::before {
        content: attr(data-title);
        position: absolute;
        bottom: -35px;
        display: inline-block;
        padding: 4px 10px;
        border-radius: 6px;
        white-space: nowrap;
    }

我可以在 CSS 中添加什么魔法来防止这种情况发生。

谢谢。

标签： htmlcss

解决方案

那是因为您正在重置 ::before 内容。您可以改用 ::after。

我只更改了以下内容以使其工作其余的 CSS 保持不变。

x-help:hover::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  bottom: -35px;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: red;
  color: white;
  font-size: 15px;
  white-space: nowrap;
}

这是小提琴：https ://jsfiddle.net/fj5swmpr/

推荐阅读