Custom Underline for a Header with CSS Sliding Doors

10/15/2009

Try it Out

Enter some text into the input field below.


How it Works

CSS Sliding Doors is a technique I first read about in David Sawyer McFarland's "CSS Missing Manual" book but, as I learned from McFarland, was originally described by Douglas Bowman in an article by him at A List Apart, (http://www.alistapart.com/articles/slidingdoors/). Both resources describe how to create a tab navigation menu where the tabs have rounded corners and need grow to accomodate the tab text. Sliding doors allows the left end of the image that creates the tab to show at all times; if it were to disappear beyond it's container the rounded left corner would be missing. I figured I could use the same technique to create a custom underline that could accomodate any length text; this would be handy for listing out user supplied content, like forum post titles.

It takes two images to make this work:


Since you can only have one background image in a tag, you also need two tags. The very long image of the tape won't extend outside of it's container, so as it's positioned to the far right, when it's container grows, more of the left end of the image shows. 

<div id="tapeMeasure"><span class='tapeHeader spanDemo'>CSS Sliding Doors Pulls out the Tape</span></div>

Bowman uses a list in his example because he's making a navigation menu. The first time I created my tape measure underline, I used a list too. Then I decided a list was stupid for this application, because there is no list, so I changed it to a span and a div. I present both solutions here; the css is the same for all, except the span-and-div method doesn't need the ul styling. A third version uses an anchor tag so the text that's underlined can be a link.

Implemented using a list

  • Implemented With a List


Implemented as link

Here's all the code: 

<style type="text/css">
.tapeHeader{    
    padding-left: 65px;    /* Keep text to the right of the tape body */
    padding-bottom: 21px;  /* increase to move text UP relative to tape body*/
    padding-top: 11px;     /* Pad to accomodate the tape body.  Less than 9px will cut the top off the tape body */
    margin-left:-10px;     /* Move Tape body left 10px to hide the yellow tape extending out the back */
    background: url("images/tapeBody.gif") no-repeat left bottom;
    height:67px;              /* Height of tapeBody.gif */
    font-size:25px;           /* Text Size */
    color: #000;
}
 
/* Style the ul tag, if you're using the list method */
ul {
padding: 0;
margin-left: 0;
}
 
#tapeMeasure{
    display:inline;        /* Prevents gap between tapeBody and ruler */
    padding-bottom: 23px;  /* Line up the yellow tape with the bit of tape thats part of the tape body image */
    background:url("images/tapeRuler.gif") no-repeat right bottom;
}
 
/* I used this tapeHeadingSpace div to make some room above aand below the heading */
.tapeHeadingSpace{    
    padding-top: 20px;
    padding-bottom : 20px;
}
</style>
<!-- Implemented with a div and span -->
<div class='tapeHeadingSpace'>            
    <div id="tapeMeasure"><span class='tapeHeader spanDemo'>CSS Sliding Doors Pulls out the Tape</span></div>            
</div>
<!-- Implemented with a list -->
<div class='tapeHeadingSpace' >
    <ul>
        <li id='tapeMeasure'><span class='tapeHeader listDemo'>Implemented With a List</span></li>
    </ul>
</div>
<!-- A link -->
<div class='tapeHeadingSpace'>            
    <div id="tapeMeasure"><a style="text-decoration:none;border-bottom:none;" class='tapeHeader' href="#" >
            I'm a link</a></div>            
</div>