SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dashed underline in css

    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

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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:
    Code:
    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:
    Code:
    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.

  3. #3
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks vinnie,

    I used the second, seemed less buggy.

    DH

  4. #4
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice tip!
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •