html - 悬停后向内容属性添加动画

Question

我想要实现的是当您将鼠标悬停在这样的元素上时的动画:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
.home:hover::after{
  content: " Home";
}

<a href="#" class="home"><i class="fa fa-home"></i></a>

因此，当您将鼠标悬停在 a 上时，会显示一些额外的文本，但我找不到任何过渡来平滑地显示它。不要介意回答使用 transition: all ...，因为这是行不通的。可以在 http://www.testingc.ga 找到该网站的实例。或在下面的代码片段中。

iframe 片段(打开导航以查看悬停在内容:“文本”上的元素。

iframe{
  border: none;
  width: 100vw;
  height: 100vh;
}

<iframe src="https://www.tc.gamingprouk.net">Error</iframe>

欢迎任何帮助!

Answer 1

是这样的吗？ 我用 CSS 过渡制作了淡入/淡出效果

.home {
  position: relative;
}
.home::after {
  content: 'Home';
  transition: opacity 0.5s;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  margin-left: 10px;
}
.home:hover::after {
  opacity: 1;
  
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<a href="#" class="home"><i class="fa fa-home"></i></a>