CODEWITHSUNDEEP
cssunderline
L84
L84

Reputation: 46308

Style Only Underline

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.

Upvotes: 2

Views: 669

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

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.

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157334

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.

Upvotes: 5

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

try this style

  <h1 style="border-bottom: 5px solid black">This is heading 1</h1>

DEMO

Upvotes: 0

Related Questions