Erstellen Sie animierte Textunterstreichungen: eine Schritt-für-Schritt-Anleitung

Question

Ich versuche, das Labelelement <a> beim Hover unterstreichen zu lassen, ähnlich dem ersten Beispiel auf dieser Seite. Es kommt mir fast dumm vor, diese Frage zu stellen, denn das Tutorial ist zwar da, aber das, was ich mache, funktioniert nicht und ich weiß nicht, warum.

Das ist mein CSS-Inhalt

#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