¿Hay alguna manera de hacer que el subrayado HTML sea más grueso?

Tengo un div centrado con un h1 nested adentro. ¿Hay alguna manera de subrayarlo con una línea más gruesa que el html predeterminado?

Esto le dará control sobre el subrayado de la etiqueta U :

  

En este caso, el subrayado será de cuatro píxeles.

No estoy recomendando CSS en línea, pero lo he usado aquí por brevedad:

 

No, no hay. El grosor del subrayado depende del navegador y no puede verse afectado en CSS (o HTML).

Hubo una vez una propiedad de text-underline-width sugerida en el borrador de texto de CSS3. Pero no hubo suficiente interés en él, y se eliminó del borrador en 2005. Probablemente nunca se implementó.

La solución habitual es utilizar un borde inferior en lugar de un subrayado. Sin embargo, tenga en cuenta que es algo diferente. El borde inferior está debajo del cuadro de línea, mientras que un subrayado normalmente está en la línea base del texto y, por lo tanto, corta los descensores de letras. En general, un borde inferior es mejor para la legibilidad que un subrayado, pero se desvía de la tradición tipográfica.

El siguiente ejemplo demuestra las diferencias.

 jgq jgq jgq 

Es posible que pueda lograr el mismo efecto visual con el ancho del borde inferior;

 h2 { border-bottom-color:black; border-bottom-style:solid; border-bottom-width:15px; }d 

Dado que no siempre quiere el borde inferior (por ejemplo, el elemento puede tener relleno y aparecerá muy lejos), este método funciona mejor:

 h1:after { content: ''; height: 1px; background: black; display:block; } 

Si quieres un subrayado más grueso, agrega más height

Si desea más o menos espacio entre el texto y el subrayado, agregue un margin-top :

 h1:after { content: ''; height: 2px; background: black; display:block; margin-top: 2px; }