SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Heading Border

  1. #1
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Heading Border

    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dresden! That did the trick!


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
  •