Créer un soulignement de texte animé : un guide étape par étape

Question

J'essaie de faire en sorte que l'élément d'étiquette <a> soit souligné en survol, comme dans le premier exemple de cette page. C'est presque stupide de poser cette question car le tutoriel est là mais ce que je fais ne fonctionne pas et je ne sais pas pourquoi.

Voici mon contenu 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

J'ai remarqué quelques propriétés manquantes :

1. content: ''a::after 上的 丢失。对于伪元素，content 属性可以为空 "", mais doit être précisé.
2. position:relative 需要位于 a 上，因为伪元素 a::after 使用 position:relative.
3. a::after正在使用background-color:inherit但似乎没有任何可以继承的值。我现在给它一个值 hotpink Mais cela peut être personnalisé pour n’importe quelle couleur.
4. Je suis en a 上添加了 cursor:pointer donc c'est plus conforme à vos résultats souhaités.

J'espère que cela vous aidera !

Exemple : (voir démo en direct avec les boutons ci-dessous)

#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