Solucionado
Boa noite, estou com uma dificuldade, gostaria q um texto meu sublinhasse quanto eu passo o mouse por cima, porém com uma leve transição para dar um efeito bacana, porém a transição não ocorre, ele sublinha diretamente
.habilidades__titulo {
text-decoration: none;
text-align: center;
font-size: 48px;
color: var(--branco-principal);
transition: 2s all;
}
.habilidades__titulo:hover {
text-decoration: underline;
transition: 2s all;
}
Oi Eduardo, tudo bem?
Em um projeto pessoal, fiz uma transição assim.
O meu código css:
nav a {
text-transform: uppercase;
color: var(--cor-secundaria);
font-weight: 700;
font-size: 22px;
text-decoration: none;
position: relative;
}
nav a::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: var(--hover-color);
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}
nav a:hover::before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}Coloquei a posição do link como relativa usando oposition: relative , porque criei um elemento absoluto (usando o position: absolute) dentro dele mesmo.
Criei o elemento para animar todas as mudanças aplicadas no nav a:before, com uma duração de 0.3 segundos, mas você pode modificar o tempo para o que te agradar mais visualmente.
E para que a animação apareça de fato, deixei o elemento visível novamente com visibility: visible em nav a:hover:before, ao passar o mouse sobre ele e assim, mudar a escala X para 1 com: transform: scaleX(1) e reforço que você pode mudar o tamanho para o que mais te agrade.
Deixo aqui a documentação CSS para o ::before e sobre scaleX.
E caso não esteja familiarizado com o termo webkit, deixo aqui essa explicação do stackoverflow.
Espero te ajudado.
Um abraço e bons estudos.
Olá Eduardo, tudo bem?
você também pode tentar isso:
.habilidades__titulo {
display:inline-block;
text-decoration: none;
text-align: center;
font-size: 48px;
color: var(--branco-principal);
transition: 800ms;
border-bottom: 1px solid transparent;
}
.habilidades__titulo:hover {
border-color: black;
}