Editar a espessura da linha do atributo CSS 'sublinhado'

Já que você pode sublinhar qualquer texto em CSS da seguinte maneira:

H4 {text-decoration: underline;}

Como você também pode editar aquela 'linha' que é desenhada, a cor que você obtém na linha é facilmente especificada como 'cor: vermelho', mas como se edita a altura da linha, ou seja, a espessura?

Aqui está uma maneira de conseguir isso:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

Aqui está um exemplo: http://jsfiddle.net/AQ9rL/

Recentemente, tive que lidar com FF, cujos sublinhados eram muito grossos e distantes do texto em FF, e encontrei uma maneira melhor de lidar com isso usando um par de sombras de caixa:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

A primeira sombra é colocada em cima da segunda e é assim que você pode controlar a segunda, variando o valor 'px' de ambas.

Mais: várias cores, espessura e posição de sublinhado

Menos: não pode ser usado em fundos não sólidos

Aqui, fiz alguns exemplos: http://jsfiddle.net/xsL6rktx/

Muito fácil ... fora do elemento "span" com fonte pequena e sublinhado, e dentro do elemento "font" com tamanho de fonte maior.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Outra maneira de fazer isso é usando ": after" (pseudo-elemento) no elemento que você deseja sublinhar.

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

Existe text-decoration-thickness, atualmente, parte do Módulo de Decoração de Texto CSS Nível 4 . Está no estágio de "Rascunho do Editor" - portanto, é um trabalho em andamento e sujeito a alterações. A partir de janeiro de 2020, ele é compatível apenas com Firefox e Safari .

A propriedade CSS text-decoration-sword define a espessura, ou largura, da linha de decoração que é usada no texto em um elemento, como uma linha, sublinhado ou sobrelinhado.

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (apenas Firefox)

Há também text-decoration-color, que faz parte do Módulo de Decoração de Texto CSS Nível 3 . É mais maduro (recomendação do candidato) e é compatível com a maioria dos navegadores principais (as exceções são Edge e IE). Claro que não pode ser usado para alterar a espessura da linha, mas pode ser usado para obter um sublinhado mais "atenuado" (também mostrado no codepen).

Vou fazer algo simples como:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• Você pode usar line-heightou padding-bottompara definir a posse entre eles
• Você pode usar display: inlineem alguns casos

Demo: http://jsfiddle.net/5580pqe8/

O background-imagetambém pode ser usado para criar um sublinhado.

Deve ser deslocado para baixo background-positione repetido horizontalmente. A largura da linha pode ser ajustada até certo ponto usando background-size(o fundo é limitado à caixa de conteúdo do elemento).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

Solução final: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

Graças à magia das novas opções de css, isso agora é possível nativamente:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

No momento, o suporte é relativamente fraco . Mas ele vai pousar em outros navegadores além do ff eventualmente.

Minha solução: https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

Você pode ajustar a posição do sublinhado com o valor da altura da linha, a espessura do sublinhado e o estilo com a borda inferior.

Cuidado para desabilitar o comportamento de sublinhado padrão se quiser sublinhar um href.