Efeito hover com metade da underline

[mruoppolo 14]

Olá, tudo bem?

 

Eu fiquei com uma dúvida aqui, preciso montar um menu que o efeito hover é um underline grosso, uns 3px de espessura e apenas um pedaço da palavra, igual a imagem que segue, como eu faço isso??

 

 

Muito obrigado :D

[L. Henrique 179]

Marcello,

Utilizando pseudo-elementos ou até mesmo uma tag neutra. Pseudo-elementos normalmente são considerados como ::before e ::after.

Você pode cria-lo da seguinte maneira (lembrando que esse é um exemplo, não o resultado final):

.link {
   color: black;
   width: 100%;
   ...
}
   .link::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 0px;
      height: 2px;
   }
   .link:hover::after {
      width: 20px;
   }

Ou você pode criar com uma tag neutra como falei:

<a href="#" class="link">
   Link
   <span></span>
</a>

CSS:

.link {
   ...
}
   .link span {
      position: relative;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 20px;
      height: 2px;
   }

Veja um exemplo aqui no JSFiddle.

 

Abraços!

[mruoppolo 14]

Cara, não rolou não, eu criei um html só pra testar olha como ficou: https://www.marcelloruoppolo.com.br/projetos/teste/

 

valeu :D

[Maujor 144]

Olá Marcello.
Efeito interessante este que você procura.
Depois passe o link da página onde você vai usar.
Veja uma solução em CodePen

[mruoppolo 14]

Valeu Maujor, funcionou aqui, pode deixar que passo sim, o site do cliente era pra ir ao ar hoje, mas acho que vai ficar pra segunda, rsrs

 

Abs