Heading Border

HTML & CSS
1

I’m trying to find a way to give a heading a bottom border that is only the length of the heading text. It seems that by adding border-bottom, the border will extend the width of the containing element. Is there a way to restrict the border to just the width of the text?

Sort of like text-decoration: underline, but I need the ability to adjust the space between the bottom of the heading text and the border.

2

Thanks Dresden! That did the trick!

3

dont use text-decoration, that is not a border, nor does it allow as many alteration as a border would.

What’s happening is that a heading is a block element, so giving it a border property will extend the entire width of the headers CONTAINING block. As far as achieving what you want try this

<hx><span>I am your Header</span></hx>

hx span{border-bottom: 3px solid pink; padding-bottom:10px}/*padding will adjust the distance from text;}

hope that helps.

change the “X” to the level of you heading, of course, and that ought to do it.