Colocando espaçamento entre um underline nativamente com CSS
E não, não é com border-bottom
Em busca de uma forma de colocar um espaçamento um link e o underline dele, estava indo na linha de utilizar um border-bottom que, apesar de ser uma solução fácil e interessante, pode acarretar em textos como esse:
Eu poderia simplesmente deixar um text-decoration: underline padrão, mas isso não ia causar o efeito que eu gostaria no meu blog.
Acontece que desde Outubro de 2021, foi divulgado a propriedade text-underline-offset
, que estava em desenvolvimento pelo time da W3C desde 2019 se não me engano, agora suporta boa parte dos navegadores modernos:
De acordo com o Can I Use, basicamente todos os navegadores modernos são suportados, exceto pelo Internet Explorer, pra variar.
Como implementá-la?
Na verdade, não tem muito segredo. Basta apenas adicioná-la nas classes que já possuem o text-decoration: underline
da seguinte forma:
a {
text-decoration: underline;
text-decoration-style: dashed;
text-underline-offset: 0.4rem; /* Porcentagens e Pixels também são aceitos */
}
Sem o
text-underline-offset
Com o
text-underline-offset
Na documentação oficial da Mozilla também é citado que, como muitas outras propriedades do CSS, essa também aceita valores globais:
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: unset;
text-underline-offset: auto;
A porcentagem como valor também é uma opção interessante, visto que ela buscará o valor do tamanho da fonte como relativo para que seu tamanho seja calculado.
Além disso, não preciso nem dizer que só funciona com text-decoration: underline
, né?