Como aumentar a diferença entre texto e sublinhado em CSS

306

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

css  underline 
— maxp
fonte
1
Isso não é exatamente o que você estava pedindo, mas foi uma leitura interessante sobre o assunto: CSS design: Sublinha Personalizado
— Peter Rowell
A distância é determinada por uma fonte usada. Tente fontes seguras para a web.
— Alexei Danchenkov
1
Atualmente, o CSS3 tem muitas novas propriedades de decoração de texto. Verifique alligator.io/css/text-decoration Exemplo: text-underline-position: under;e text-decoration-skip: ink;Observe que isso provavelmente não é compatível com os navegadores antigos.
— Chocolata #
1
— w3spi
1
Vote text-underline-offsetaqui: bugs.chromium.org/p/chromium/issues/…
— Mark Fisher

Respostas:

356

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

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

Para várias linhas, você pode agrupar textos de várias linhas em um espaço dentro do elemento. Por exemplo <a href="#"><span>insert multiline texts here</span></a>, basta adicionar border-bottome paddingna <span>- Demo

— chelmertz
fonte
3
Meu único problema com esse truque é quando estou usando a altura da linha igual à altura da div e depois o alinhamento vertical: middle; para centralizá-lo, não posso usar esse truque porque o sublinhado termina abaixo da div.
— deweydb
@deweydb: Que tal adicionar o fundo de preenchimento também à div do contêiner? jsfiddle.net/dYfjc/1
— chelmertz
+1 Eu não sabia como deixar de fora a propriedade color para herdar a cor da fonte - isso economizará muito suor e lágrimas no futuro!
— Larry
9
Não sei bem por que essa resposta tem tantos votos positivos. Isso não funciona completamente com textos de várias linhas.
3
Para várias linhas, você pode agrupar textos de várias linhas em um espaço dentro do elemento. Por exemplo <a href="#"><span>insert multiline texts here</span></a>, basta adicionar borda inferior e preenchimento no <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
— Daniel Hernandez
133

Atualização 2019: o CSS Working Group publicou um rascunho para o nível 4 de decoração de texto que adicionaria uma nova propriedade text-underline-offset(além de text-decoration-thickness) para permitir o controle sobre o posicionamento exato de um sublinhado. No momento da redação deste documento, é um rascunho em estágio inicial e não foi implementado por nenhum navegador, mas parece que eventualmente tornará a técnica abaixo obsoleta.

Resposta original abaixo.

O problema com o uso border-bottomdiretamente é que mesmo com padding-bottom: 0, o sublinhado tende a ser muito longe afastado do texto para uma boa aparência. Portanto, ainda não temos controle completo.

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

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 bottompropriedade (números negativos são aceitáveis), você pode posicionar o sublinhado exatamente onde deseja.

Um problema com esta técnica a ter em atenção é que ela se comporta um pouco esquisita com as bandagens.

— último filho
fonte
2
Isso não funcionará para o meu problema específico, mas é um truque fantástico. 1
11
Boa em torno do trabalho, mas isso não vai funcionar para âncoras que abranger várias linhas
— Willster
@ última criança Este é melhor do que sublinhado, mas com texto embrulhar Isto não trabalho para cada linha
— Nishantha
Um problema é que uma borda inferior e um sublinhado são duas coisas diferentes. Por exemplo, parte do texto deve se estender abaixo do sublinhado. Se você estilizar tags a como botões, não terá liberdade de usar a borda inferior como sublinhado.
— Anders Lindén
10
Imagine dizer a alguém que é novo no desenvolvimento da Web, designer gráfico, usuário comum ou sua mãe que é necessário adicionar um espaço controlado entre o texto e o sublinhado e eles se perguntarão o que você está fazendo com sua vida. .
— MarcGuay 26/05
79

Você pode usar isso 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 .

— Duc Huynh
fonte
2
Obrigado! Se você está tentando criar um sublinhado tracejado e vê que ele é desenhado sem espaço entre a parte inferior do texto e a linha, isso corrige o problema.
— Jonathan Cross
6
Esta é a resposta correta para navegadores modernos sem nenhuma solução alternativa.
— Paras Shah
2
Ele não funciona no Firefox, nem mesmo com o prefixo do fornecedor - mas está em uma especificação do W3C: w3.org/TR/css-text-decor-3/#text-underline-position-property . Outro recurso relevante: quackit.com/css/css3/properties/css_text-underline-position.cfm
— rosell.dk
4
A partir deste momento, isso realmente funciona apenas no navegador Chrome e não é uma solução para outros navegadores.
— Miir
2
Bem, na data deste comentário, vejo que isso também funciona no Firefox .
— Jarad
15

Aqui está o que funciona bem para mim. 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
Expandir snippet

— Jordan Starrk
fonte
2
É importante notar que text-underline-positionnão é suportada no Firefox como por developer.mozilla.org/en-US/docs/Web/CSS/...
— Floran Gmehlin
Muito interessante. Ótimo texto explicativo. Obrigado!
— Jordan Starrk
Suportado no Firefox a partir de 74, conforme o mesmo link.
— GSerg
11

Entrar nos detalhes do estilo visual text-decoration:underlineé praticamente inútil, então você terá que fazer algum tipo de hack text-decoration:underlinee remover e substituí-lo por outra coisa até que uma versão mágica e distante 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;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
Expandir snippet

  • Ajuste os valores de% (81% e 85%) para alterar a distância da linha do texto
  • Ajuste a diferença entre os valores de dois% para alterar a espessura da linha
  • ajuste os valores da cor (# 222222) para alterar a cor do sublinhado
  • trabalha com vários elementos de linha em linha
  • funciona 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 o 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-o 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 dos Descenders

Se você tiver uma cor de plano de fundo sólida, tente adicionar uma fina text-strokeou text-shadowda mesma cor do plano de fundo para deixar os descendentes bonitos.

Crédito

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

— squarecandy
fonte
Infelizmente, o link eager.io não funciona mais. Você se lembra qual foi o truque para tornar os descendentes mais agradáveis?
— Kano
1
@ Kano - Eu acredito que estava usando sombra de texto na mesma cor que um fundo sólido.
— Squarecandy
Além disso, com a técnica acima, você pode definir a cor do sublinhado diferente do texto; portanto, às vezes, eu o deixo mais claro que o texto, o que torna as colisões com os descendentes menos um problema para facilitar a leitura.
— Squarecandy
7

Sei que é uma pergunta antiga, mas a configuração de texto de linha única display: inline-blocke a configuração de heightfuncionaram bem para eu controlar a distância entre uma borda e o texto.

— Dominic P
fonte
1
Eu não precisava definir a altura. Eu apenas o envolvi em outra div e, como eu queria que fosse centralizada, apenas defina o alinhamento do texto na div externa.
— Guy Lowe
6

@ A resposta do último filho é uma ótima resposta!

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

Se você estiver escrevendo seu CSS dinamicamente, ou se, como eu, tiver sorte e souber qual será o texto, faça o seguinte:

  1. altere contentpara algo do tamanho certo (ou seja, o mesmo

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

para sublinhar <h2>Processing</h2>(por exemplo), altere o código do último filho para:

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;
}
— Michael Greisman
fonte
9
H2s são elementos de bloco que podem explicar por que o sublinhado foi maior que o texto. Talvez display: inline-blockconserte isso. Substituir o texto por contentparece um hack que pode quebrar de várias maneiras.
— last-child
3

Veja meu violino .

Você precisaria usar a propriedade largura da borda e a propriedade padding. 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;
}
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>
Expandir snippet

— poeira estelar
fonte
2

Uma alternativa para textos ou links com várias linhas, você pode agrupar seus textos em um espaço dentro de um elemento de bloco. 

<a href="#">
    <span>insert multiline texts here</span>
</a>

você pode simplesmente adicionar borda inferior e preenchimento no <span>.

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/

— Daniel Hernandez
fonte
2

Se você quiser:

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

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

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

Você pode substituir o segundo 100%por algo mais pxou emajustar a posição vertical do sublinhado. Também é possível usar calcse você deseja adicionar preenchimento vertical, por exemplo:

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

Claro que você também pode criar seu próprio padrão png base64 com outra cor, altura e design, por exemplo: aqui: http://www.patternify.com/ - basta definir largura e altura quadradas em 2x1.

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

— mcmimik
fonte
1

Se você estiver usando text-decoration: underline;, poderá adicionar espaço entre sublinhado e texto usandotext-underline-position: under;

Para saber mais As propriedades da posição de sublinhado de texto, você pode ver aqui

— Ifrah
fonte
0

Consegui fazê-lo 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;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>
— Arun Prasad ES
fonte
0

Isto é o que eu uso:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
— Constantinos Constantinou
fonte
0

O que eu uso:

<span style="border-bottom: 1px solid black"> Enter text here </span>
— Francis Acosta
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.