CSS Design: Custom Underlines

by Stuart Robertson

66 Reader Comments

Back to the Article
  1. How fun!

    Thinking of a way to implement this on a site that could get away with it, I thought it might be cool to have a subtle graphic appear as a background rather than an underline on hover.

    Of course, after messing with it for a few minutes, I decided the subtle graphic is too subtle, and the bright one is too distracting. However, if someone would like to experiment with it, here are the changes:

    a {
    text-decoration: none;
    white-space: nowrap;
    }

    a:hover {
    background: #FF0 url(flower.gif) repeat-x 100% 50%;
    }

    There’s no padding, and the vertical position is changed to 50% (had to use %, not px and not center).  Not sure how this will hold up, but it works in Windows – Opera 7.23, IE 6.0, and NN 7.1.

    Esme

    Copy & paste the code below to embed this comment.
  2. Here’s a simple double underliner using border only:

    u {border-bottom: 0.075em solid; line-height: 107.5%}

    (or use a, u.double, etc). The color is inherited, so it matches the text, and the underline scales well with text zoom and font changes (at least in Mozilla).

    Cheers!

    The Bead Man

    Copy & paste the code below to embed this comment.
  3. I’ve found on my site that it can get a bit dodgy.. underlines staying put after the mouse has left etc.

    Anything I can do to improve performance?

    Copy & paste the code below to embed this comment.
  4. I’m waiting for my new Mac to arrive (my first one)… then I will finally be able to test for Safari! :-)  I did test with the new Mozilla Firefox ( http://www.mozilla.org/products/firefox/ ) last night and that looked good.

    Copy & paste the code below to embed this comment.
  5. you can see my problem here, and with the explorer. No mozilla.

    http://www.arrevoire.com/css/css.html

    The background eat the text.
    ¿How can I control the space between the background image respectthe text?


    Sorry for my english

    Copy & paste the code below to embed this comment.
  6. You can control the spacing between the background image and the text by changing the padding.  Try padding-bottom: 6px;

    Copy & paste the code below to embed this comment.
  7. I general problem I have with this example and most examples of sprucing up links is that I can never get them to play nice with img links.

    For example, if I have

    a { border-bottom: 2px solid orange }
    a:hover { border-bottom: 2px dotted orange }

    This is fine for all the links, and far nicer than the boring unerline, which I wlays find hugs the word too closely. An underline is simply a border under the word in essence anyhow. The problem comes with images such as

    /pic

    This will displays the borders, which looks bad. Solved,

    a img { border-bottom: none }

    Only you can’t do this for the hover!!!

    a:hover img { border-bottom: none }

    does not seem valid. So I just use underlines and leave the rest be until non-text links are easier.

    Copy & paste the code below to embed this comment.
  8. If you could show me how to do this (rollover effect in particular) in place of a bullet on an unordered list-turned-horizontal nav, I’d be yours forever.

    Copy & paste the code below to embed this comment.
  9. I just wanted to update any Safari 1.2 users out there that the animated underlines appear to work fine. The animation no longer stops after the first frame

    Tested on Mac OS 10.3/ Safari 1.2

    Copy & paste the code below to embed this comment.
  10. I hate it when you want an dashed underline that takes up the whole width of the page. I hate using images as well. Therefore I devised the Dante Hack:
    A {
    border: 1px dashed #eee;
    width: 1em;
    white-space: nowrap;
    }
    Now the dashed underline will go only as far as the text does, and you don’t have to use images. The width is important; make sure it’s really small.

    Copy & paste the code below to embed this comment.
  11. i like this, but don’t know if i will use it

    Copy & paste the code below to embed this comment.
  12. Hey, this isn’t the blinking underline all over again.  Applying most of the code to a span then this allows me to use a very small image as an underline for so many elements such as tables, so quick and esay.

    I Love it, what’s wrong with a wink anyway

    Copy & paste the code below to embed this comment.
  13. On the related subject of creating custom hyperlinks, I wonder if anyone knows a fix for the following problem.
    Say, for example, that you have just entered a username and password in some form fields to login to a website.
    Now, when you click on the submit button, a “box” of dotted lines appears inside the submit button. But it doesn’t stop there. Any hyperlink to be clicked now retains these pesky dots, unless a new window is open and closed (e.g., try a search on ALA, and then click on a link to see the borders). These dots can make a mess out of the appearance of some hyperlinks.
    Does anyone know a good work-around for this?
    Thanks.

    Copy & paste the code below to embed this comment.
  14. The article is very interesting. I believe CSS Design has a great future though it can’t solve all the problems yet and absolutely replace table design.

    Copy & paste the code below to embed this comment.
  15. So this technique is pretty cool. Has anyone taken a look at it in IE on a PC. I’m running XP Pro and using IE 6.0.2 for Q&A purposes. It seems that the lines that wrap lose all text-decoration all together.

    Any thoughts on this?

    Copy & paste the code below to embed this comment.
  16. I failed to mention the site I was viewing.

    http://www.csszengarden.com/?cssfile=/063/063.css

    Copy & paste the code below to embed this comment.