Long ago, there was the property text-underline-width
in the CSS3 Text Module CR, defined to specify the thickness. However, it was not implemented in browsers, and it was dropped in the 2005 version of the module. This indirectly shows that it is not possible to set the underline width in CSS.
As regards to using border-bottom
instead of a text-decoration: underline
, it’s a different property, with different effect (the border is in an essentially lower position), and there are many existing questions on how to make it just as narrow as the text, which seems to be the issue here. But the simplest way is to use some inline (text-level) markup that spans the text in your heading, e.g.
<h1><u>Your heading text</u></h1>
with e.g.
u { text-decoration: none; border-bottom: 0.2em solid }
Instead of u
, you could use e.g. the span
element, but u
has the advantage of producing at least a simple underline even when CSS styling is disabled in the browser. Using u
, you of course need to switch off its default underlining, to avoid getting both underline and bottom border.