Editar el grosor de línea del atributo 'subrayado' de CSS

Dado que puede subrayar cualquier texto en CSS así:

H4 {text-decoration: underline;}

¿Cómo puede también editar esa 'línea' que se dibuja, el color que obtiene en la línea se especifica fácilmente como 'color: rojo' pero cómo se edita la altura de la línea, es decir, el grosor?

Aquí hay una forma de lograrlo:

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;
  }​

Aquí hay un ejemplo: http://jsfiddle.net/AQ9rL/

Recientemente tuve que lidiar con FF, cuyos subrayados eran demasiado gruesos y demasiado alejados del texto en FF, y encontré una mejor manera de lidiar con eso usando un par de sombras de cuadro:

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

La primera sombra se coloca encima de la segunda y así es como puedes controlar la segunda variando el valor de 'px' de ambas.

Además: varios colores, grosor y posición de subrayado

Menos: no se puede usar en fondos no sólidos

Aquí hice un par de ejemplos: http://jsfiddle.net/xsL6rktx/

Muy fácil ... fuera del elemento "span" con letra pequeña y subrayado, y dentro del elemento "font" con un tamaño de letra mayor.

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

Otra forma de hacer esto es usando ": after" (pseudo-elemento) en el elemento que desea subrayar.

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;

}

Actualmente hay text-decoration-thicknessparte del Módulo de Decoración de Texto CSS Nivel 4 . Está en la etapa de "Borrador del editor", por lo que es un trabajo en progreso y sujeto a cambios. A partir de enero de 2020, solo es compatible con Firefox y Safari .

La propiedad de CSS de grosor de decoración de texto establece el grosor o ancho de la línea de decoración que se utiliza en el texto de un elemento, como una línea, un subrayado o una línea superior.

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

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

También está text-decoration-color, que es parte del Módulo de Decoración de Texto CSS Nivel 3 . Esto es más maduro (recomendación candidata) y es compatible con la mayoría de los principales navegadores (las excepciones son Edge e IE). Por supuesto, no se puede usar para alterar el grosor de la línea, pero se puede usar para lograr un subrayado más "silenciado" (también se muestra en el código del lápiz).

Haré algo simple como:

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

• Puede usar line-heighto padding-bottompara establecer la posición entre ellos
• Puedes usar display: inlineen algún caso

Demostración: http://jsfiddle.net/5580pqe8/

los background-image también se puede utilizar para crear un subrayado.

Tiene que desplazarse hacia abajo background-positiony repetirse horizontalmente. El ancho de la línea se puede ajustar hasta cierto punto usando background-size(el fondo está limitado al cuadro de contenido del 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>

Solución final: http://codepen.io/vikrant-icd/pen/gwNqoM

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

Gracias a la magia de las nuevas opciones de CSS, esto ahora es posible de forma nativa:

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

Hasta el momento, el apoyo es relativamente deficiente . Pero eventualmente aterrizará en otros navegadores además de ff.

Mi solución: https://codepen.io/SOLESHOE/pen/QqJXYj

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

Puede ajustar la posición del subrayado con el valor de la altura de la línea, el grosor del subrayado y el estilo con el borde inferior.

Tenga cuidado de desactivar el comportamiento de subrayado predeterminado si desea subrayar un href.