Style Only Underline

Question

I have a header that is underlined using text-decoration: underline; The only problem is the line is too thin. I would like to make only the underline thicker. I have considered using border-bottom to do this but the border stretches the full width of the container and the text is centered. Doesn't work.

Answer 1

You can wrap the text with <span> tags around, using display: inline-block;, remove text-decoration: underline; property and add border-bottom: 2px solid #000;

Demo

Note: Why use inline-block? So that you can also control the spacing between the border and the text, using padding or margins, but if you don't require display: inline-block; you can simply get rid of it as NullPoiиteя said. Also, be sure to use a class on the parent element to select particular span tag of a particular element.class pair.