Tenho essa animação de link. Quero que o link seja sublinhado por padrão e, então, adicionar um sublinhado animado ao passar o mouse (sublinhado deslizando da esquerda para a direita). Este exemplo está fazendo exatamente o que estou procurando, mas ao passar o mouse o sublinhado fica muito próximo do texto âncora - provavelmente porque estou trocando de text-decoration para um background.
Então, como posso mover o fundo do hover para baixo para corresponder ao text-underline-offset? Adicionar background-position: left bottom -5px;
ao hover não vai funcionar.
a {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-decoration: underline;
text-underline-offset: 5px;
position: relative;
background: linear-gradient(#000, #000) left bottom no-repeat;
background-size: 0% 1px;
}
a:hover {
text-decoration: none;
background-size: 100% 1px;
transition: all 0.8s;
/* background-position: left bottom -5px; */
}
body {
line-height: 1.5;
}
<p>Bacon ipsum dolor amet picanha pork leberkas tail pig capicola. Fatback bacon rump biltong pastrami meatball cow. Meatloaf venison doner, flank swine pig beef bresaola corned beef capicola tri-tip bacon. Tri-tip rump ham short loin. Prosciutto porchetta corned beef rump. Pork chislic tri-tip short loin landjaeger andouille alcatra jerky sausage turkey. Chuck pastrami t-bone boudin doner pancetta pork chop flank pork shank spare ribs drumstick.</p>
<p>
<h3>Hover this link</h3>
Andouille pork t-bone beef pig burgdoggen jowl. Shank short loin landjaeger rump alcatra pork belly jerky hamburger. <a href="">Pig cupim tongue meatball hamburger fatback flank prosciutto pork belly shank.</a>Chuck bresaola buffalo, short loin cow tongue tenderloin landjaeger beef cupim boudin shankle chislic t-bone. Sausage tenderloin hamburger leberkas kielbasa doner corned beef frankfurter tri-tip venison pastrami burgdoggen shankle. Kielbasa pancetta chicken strip steak. Cow bresaola biltong, boudin frankfurter filet mignon chislic andouille ham pork belly pastrami kevin.
</p>
<p>
Biltong alcatra venison burgdoggen landjaeger, ball tip kielbasa prosciutto boudin tri-tip sirloin ribeye. Jowl buffalo pork belly sirloin cow porchetta. Salami prosciutto chuck doner swine buffalo beef andouille hamburger flank turkey short loin pork chop. Leberkas boudin ribeye chicken. Ball tip pancetta pork loin hamburger flank corned beef tongue meatloaf alcatra doner t-bone biltong buffalo rump. Sausage shankle beef beef ribs. T-bone ham hock rump venison swine sausage.</p>
Adicione um padding inferior. Isso não afetará o layout, pois você está lidando com um elemento inline