CSS Design: Custom Underlines

by Stuart Robertson

66 Reader Comments

Back to the Article
  1. and a bag of chips.

    Copy & paste the code below to embed this comment.
  2. It’s great that the boundaries of using CSS are constantly pushed further. However, I am not particularly thrilled by this technique. The effect is rather cheesy.

    Copy & paste the code below to embed this comment.
  3. Nice article! But…

    I’ve experimented with animated backgrounds on hyperlinks, but decided not to use it in practice because it causes an irritating flickering effect on the cursor in IE/WIN.

    Copy & paste the code below to embed this comment.
  4. I wish I had given this one a little more thought before posting. I agree with what CM Harrington said in reply to my first post. Further thoughts on hacks will be saved for a later discussion.

    To get on with this discussion: I think it would be good if “background-image” could treat line elements and block elements differently, so that each line in a line element could count as a separate element, allowing background-image settings to repeat from line to line – wrap, in other words.

    This would require additions to the CSS language, of course, and I haven’t thought about it nearly enough to give any suggestions.

    While “text-decoration: underline” could be extended to something like “text-decoration: underline url(image.gif)”, “background-image” has already got a lot more options for image rendering than underline, overline and strike-through. Still, no harm in having two methods.

    Finally, I want to thank Dante for showing me that I’m not the only one to hit the submit button too soon. :)

    Copy & paste the code below to embed this comment.
  5. >>>>
    While “text-decoration: underline” could be extended to something like “text-decoration: underline url(image.gif)”,
    >>>>

    I am surprised that it doesn’t do that, considering the W3C decided to allow arbitrary bullets in lists. It seems like a natural extension.

    The nice thing about browsers finally attempting to conform to W3C standards, is that well-developed rules will be implemented in browsers at a quicker pace. The sooner that happens, the sooner the new rules become viable choices for public/mass deployment.

    Of course, IE won’t be updated for 2+ years, but I can’t do anything about that.

    Apologies for the spelling errors in my previous posts. I hate it when I do that.

    Copy & paste the code below to embed this comment.
  6. I noticed a variation of this technique in the http://www.csszengarden.com/?cssfile=050/050.css Zen Garden submission.

    Very cool. One more thing to add to the toolbox.

    Copy & paste the code below to embed this comment.
  7. I guess this is an obvious solution, using backgrounds, if the need is desperate. But now that someone has produced such a nice article about it, we have another path for added grooviness. Good stuff.

    Copy & paste the code below to embed this comment.
  8. Great, now Safari 1.2 shows animated underline! :]
    (Oh, really useful site, compliments)

    Copy & paste the code below to embed this comment.
  9. The background image property can artfully enhance hyperlinks.
    However, as much as I would like to and have tried to incorporate the technique, it actually makes hyperlinks worse. That is because in Internet Explorer 6.0 the cursor periodically changes to an hourglass while hovering over links. Until there is a solution, any artistry achieved loses its point due to the confusion brought by the hourglass effect.

    Copy & paste the code below to embed this comment.
  10. I highly enjoy these guided demos – this one once again struck me as very easy to follow, taking each styling step one at a time. Relaxing to read during a coffee break from some head-scratching coding issues :)

    One thing I’d appreciate and therefore note here as a suggestion:
    I am very much for cross-browser, forward-compatible coding, but as we do live in the present, it would be very practical for articles like this to include more explicit data about which browsers do a good job rendering the presented matter and which ones don’t.

    Yes, it WAS good for me ;) thanks!

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. i like this, but don’t know if i will use it

    Copy & paste the code below to embed this comment.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. 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.