Obtuve una animación css para subrayar, pero configurando:

 <button className="btn active">

no parece tener el final de la animación configurado como predeterminado. ¿Alguien puede indicarme qué estoy haciendo mal? Aquí está mi CSS:

 .btn { position: relative; text-transform: uppercase; color: whitesmoke; transition: all 0.5s ease-in; font-size: 1.3rem; cursor: pointer; } .btn:hover { color: white; } .btn:hover::after { transform: scale(1, 1); transition: transform 0.3s ease; } .btn::after { content: ""; position: absolute; width: 100%; height: 0.105rem; left: 0; bottom: 0; background: whitesmoke; transform: scale(0, 1); } .btn:active { transform: scale(1, 1); }