Buat garis bawah teks animasi: panduan langkah demi langkah

Question

Saya cuba menjadikan elemen label <a> menghidupkan garis bawah pada tuding, serupa dengan contoh pertama pada halaman ini. Hampir berasa bodoh untuk bertanya soalan ini kerana tutorial ada tetapi apa yang saya lakukan tidak berfungsi dan saya tidak tahu mengapa.

Ini kandungan CSS saya

#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

Saya perasan beberapa sifat yang hilang:

1. content: ''a::after 上的 丢失。对于伪元素，content 属性可以为空 "", tetapi mesti dinyatakan.
2. position:relative 需要位于 a 上，因为伪元素 a::after 使用 position:relative.
3. a::after正在使用background-color:inherit但似乎没有任何可以继承的值。我现在给它一个值 hotpink Tetapi ini boleh disesuaikan dengan mana-mana warna.
4. Saya dalam a 上添加了 cursor:pointer jadi ia lebih menepati hasil yang anda inginkan.

Semoga ini membantu!

Contoh: (lihat demo langsung dengan butang di bawah)

#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