创建动画文本下划线：分步指南

Question

我正在尝试使 <a> 标签元素在悬停时在下划线中显示动画，类似于本页上的第一个示例。问这个问题几乎感觉很愚蠢，因为教程就在那里，但我正在做的事情不起作用，我不知道为什么。

这是我的 CSS 内容

#about-text-box a {
    text-decoration: none;
    font-size: 17pt;
    font-family: 'Silkscreen', cursive;
    color: #ECE0E7;
    text-align: center;
    width: 95%;
    text-shadow: 2px 2px 2px #101400;
    transition: 0.5s;
}

#about-text-box a:hover::after, #about-text-box a:focus::after {
    opacity: 1;
    transform: translate3d(0, 0.2em, 0);

}

#about-text-box a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.1em;
    background-color: inherit;
    opacity: 0;
    transition: opacity 300ms, transform 300ms;;
}

Answer 1

我注意到一些缺失的属性：

1. content: ''a::after 上的 丢失。对于伪元素，content 属性可以为空 ""，但必须指定。
2. position:relative 需要位于 a 上，因为伪元素 a::after 使用 position:relative。
3. a::after正在使用background-color:inherit但似乎没有任何可以继承的值。我现在给它一个值 hotpink，但这可以自定义为任何颜色。
4. 我在 a 上添加了 cursor:pointer，因此它更符合您想要的结果。

希望这会有所帮助！

示例：（请参阅下面带有按钮的现场演示）

#about-text-box {
  display: flex;
}

#about-text-box a {
  display: block;
  position: relative;
  padding: 0.2em 0;
  cursor: pointer;
  text-decoration: none;
  font-size: 17pt;
  font-family: "Silkscreen", cursive;
  color: #ece0e7;
  text-align: center;
  text-shadow: 2px 2px 2px #101400;
  transition: 0.5s;
}

#about-text-box a:hover::after,
#about-text-box a:focus::after {
  opacity: 1;
  transform: translate3d(0, 0.2em, 0);
}

#about-text-box a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: hotpink;
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}

  Hover this link