建立動畫文字下劃線：逐步指南

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