Dashed underline in css

[dhtmlhelp]

Hi I am trying to underline an <h1> using css. I have been using the border property to do this, however this underlines the full <h1>, I would like the underline to finish where the text ends, can anyone help?

DH

[vgarcia]

There are different ways to go about this, if you want to only underline the text of the <h1>. Take a look at the following markup/CSS combos and see which one works best for you:

Option #1:

h1 {
  display: inline;
  border-bottom: 1px dashed red;
}
----------
<h1>My heading</h1>
<!--this break is here because <h1> isn't block anymore-->
<br />

Option #2:

h1 span {
  border-bottom: 1px dashed red;
}
---------------------
<h1><span>My heading</span></h1>

There are other ways to do this, like the custom underlines approach with images, or explicitly setting the width of that particular <h1> to match your text length, but that may not work for your situation. One of the above ought to work for you.

[dhtmlhelp]

thanks vinnie,

I used the second, seemed less buggy.

DH

[jamesxv7]

Nice tip!