Underline on H2, H2, etc.

Is there an easy way of doing this?

[BeeDeeDubbleU]

I have set my H2 with a 1px dotted underline but there are places on the site where I don't want the underline to extend across the page.

Is there any trick to limit the underline to the extent of the text as opposed to the extent of the page?

[Robin_reala]

If you’re setting dotted then you’re actually setting a border, not an underline. If you just want it to span the text then you can set your header to either be float:left or position:absolute (both of which shrink-wrap their contents in the absence of a set width) or make it display:inline (which will result in multiple underlines if your text spans multiple lines). Both of these approaches have side-effects on the header that you might not want, so you might want to add a <span> inside your headers and apply the styles to that instead.

[mattur]

I would add an inline element, eg:

<h2><i>My Heading</i></h2>

h2 i {
border-bottom: ...
}

[BeeDeeDubbleU]

If you’re setting dotted then you’re actually setting a border, not an underline.

You're right of course. I was just being lazy with my description ;)