Como aumentar o intervalo entre texto e sublinhado em CSS

Usando CSS, quando o texto tem text-decoration:underline applied, é possível aumentar a distância entre o texto e o sublinhado?

    Não, mas você poderia ir com algo como border-bottom: 1px solid #000 e padding-bottom: 3px .

    Se você quiser a mesma cor do “sublinhado” (que no meu exemplo é uma borda), basta deixar de fora a declaração de cor, ou seja, border-bottom-width: 1px e border-bottom-style: solid .

    Para multilinha, você pode envolver textos de várias linhas em um intervalo dentro do elemento. Por exemplo, insert multiline texts here seguida, adiciona apenas border-bottom e padding no – Demonstração

    O problema com o uso direto do border-bottom é que, mesmo com o padding-bottom: 0 , o sublinhado tende a ficar muito longe do texto para ter boa aparência. Então ainda não temos controle total.

    Uma solução que fornece precisão de pixel é usar o elemento pseudo :after :

     a { text-decoration: none; position: relative; } a:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; } 

    Alterando a propriedade bottom (números negativos estão bem) você pode posicionar o sublinhado exatamente onde você quer.

    Um problema com essa técnica é que ela se comporta um pouco estranha com os envoltórios de linha.

    Você pode usar essa text-underline-position: under

    Veja aqui para mais detalhes: https://css-tricks.com/almanac/properties/t/text-underline-position/

    Veja também a compatibilidade do navegador .

    Entrando nos detalhes do estilo visual da text-decoration:underline de text-decoration:underline é muito fútil, então você vai ter que ir com algum tipo de hack the remove text-decoration:underline e substitua-o por outra coisa até um momento mágico A futura versão do CSS nos dá mais controle.

    Isso funcionou para mim:

     a { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) 81%, #222222 81.1%, #222222 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) ); text-decoration: none; } 
    • Ajuste os valores% (81% e 85%) para alterar a distância entre a linha e o texto
    • Ajuste a diferença entre os dois valores% para alterar a espessura da linha
    • ajuste os valores das colors (# 222222) para alterar a cor do sublinhado
    • trabalha com elementos inline de múltiplas linhas
    • trabalha com qualquer fundo

    Aqui está uma versão com todas as propriedades proprietárias para alguma compatibilidade com versões anteriores:

     a { /* This code generated from: http://colorzilla.com/gradient-editor/ */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */ text-decoration: none; } 

    Atualização: versão SASSY

    Eu fiz um scss mixin para isso. Se você não usa SASS, a versão regular acima ainda funciona muito bem …

     @mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) $top, $color $top + 0.1%, $color $bottom, rgba(0,0,0,0) $bottom + 0.1%, rgba(0,0,0,0) ); text-decoration: none; } 

    então use assim:

     $blue = #0054a6; a { color: $blue; @include fake-underline(lighten($blue,20%)); } a.thick { color: $blue; @include fake-underline(lighten($blue,40%), 86%, 99%); } 

    Atualização 2: Dica de Descendentes

    Se você tiver uma cor de plano de fundo sólida, tente adicionar um text-stroke fino ou text-shadow na mesma cor do plano de fundo para que os decentes fiquem com boa aparência.

    Crédito

    Esta é uma versão simplificada da técnica que encontrei originalmente em https://eager.io/app/smartunderline , mas o artigo já foi removido.

    Eu sei que é uma questão antiga, mas para display: inline-block configuração de texto de linha única display: inline-block e, em seguida, definindo a height funcionou bem para eu controlar a distância entre uma borda eo texto.

    @ Última resposta da criança é uma ótima resposta!

    No entanto, adicionar uma borda ao meu H2 produziu um sublinhado maior que o texto.

    Se você está escrevendo dinamicamente seu CSS, ou se você tiver sorte e souber o que o texto será, você pode fazer o seguinte:

    1. alterar o content para algo o comprimento certo (ou seja, o mesmo

    2. texto) defina a cor da fonte para transparent (ou rgba(0,0,0,0) )

    para sublinhar

    Processing

    (por exemplo), altere o código do último filho para ser:

     a { text-decoration: none; position: relative; } a:after { content: 'Processing'; color: transparent; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; } 

    Veja meu violino .

    Você precisaria usar a propriedade de largura de borda e a propriedade de preenchimento. Eu adicionei algumas animações para parecer mais legal:

     body{ background-color:lightgreen; } a{ text-decoration:none; color:green; border-style:solid; border-width: 0px 0px 1px 0px; transition: all .2s ease-in; } a:hover{ color:darkblue; border-style:solid; border-width: 0px 0px 1px 0px; padding:2px; } 
     Somewhere ... over the rainbow (lalala) , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a what a wonder-ful world! World! 

    Uma alternativa para textos ou links multilinha, você pode envolver seus textos em uma extensão dentro de um elemento de bloco.

      insert multiline texts here  

    então você pode simplesmente adicionar borda inferior e preenchimento no .

     a { width: 300px; display: block; } span { padding-bottom: 10px; border-bottom: 1px solid #0099d3; line-height: 48px; } 

    Você pode se referir a esse violino. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

    Se você quiser:

    • multilinha
    • pontilhado
    • com preenchimento inferior personalizado
    • sem invólucros

    sublinhado, você pode usar uma imagem de fundo de 1 pixel de altura com a posição repeat-x e 100% 100% :

     display: inline; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%; 

    Você pode replace o segundo 100% por algo como px ou em para ajustar a posição vertical do sublinhado. Também você pode usar calc se você quiser adicionar padding vertical, por exemplo:

     padding-bottom: 5px; background-position-y: calc(100% - 5px); 

    É claro que você também pode fazer seu próprio padrão de base64 com outra cor, altura e design, por exemplo, aqui: http://www.patternify.com/ – basta definir largura e altura quadradas em 2×1.

    Fonte de inspiração: http://alistapart.com/article/customunderlines

    Eu consegui fazer isso usando o U (Underline Tag)

     u { text-decoration: none; position: relative; } u:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; }  
    Shop Now

    Isso é o que eu uso:

    html:

     
    GET IN TOUCH

    css:

     .horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }