CSS Design: Custom Underlines

by Stuart Robertson

66 Reader Comments

Back to the Article
  1. AWESOME. You guys are geniuses!

    Copy & paste the code below to embed this comment.
  2. Just a quick note that the final—animated—example in the article works fine in Safari 1.2 (released around Feb 3).

    Copy & paste the code below to embed this comment.
  3. Just wanted to let you know that the animated rollover works fine in he new version of Safari (1.2).

    Copy & paste the code below to embed this comment.
  4. Of course it’s a hack; this trick emulates text-decoration behaviour by using a background-image technique. Using band-aid to glue the leg of your glasses to the lense may be aesthetically pleasing, fully functional, even done on purpose, but it’s still a hack.

    On a more serious note, this method has the potential for accessibility problems, because some people may be using a CSS-enabled graphical browser with image-loading switched off. Make sure your fake underline is not the only hint that some text represents a hyperlink.

    Copy & paste the code below to embed this comment.
  5. We have now heard from those who say the method shown in this article is a hack, and from others (including your humble correspondent) who say it is not.

    Both views have been aired. Nothing new is to be gained from continued arguments of the “yes it is, no it isn’t” variety.

    We respectfully ask that posts going forward discuss aspects of the article other than whether it is, or is not, a hack.

    Future comments limited to whether or not the poster considers the method a hack will be deleted.

    Future comments on just about anything else to do with the article are welcomed and will be enjoyed.

    As mentioned, an ALA issue in the near future will consider the “CSS hacks” topic and provide a forum for your views on that subject.

    Meanwhile, there are more fruitful fields to till in response to “Custom Underlines.”

    Thanks.

    Copy & paste the code below to embed this comment.
  6. Branko wrote:

    “On a more serious note, this method has the potential for accessibility problems, because some people may be using a CSS-enabled graphical browser with image-loading switched off. Make sure your fake underline is not the only hint that some text represents a hyperlink.”

    Agreed! Weight, color, or both should also be used, as they are here at ALA. Bolding is one common method of indicating that text is a hyperlink; color choice is another. (Bolding helps those who cannot distinguish between colors.)

    Most ALA readers know this, but it deserves to be said as a reminder.

    Copy & paste the code below to embed this comment.
  7. Web design, especially as it pertains to CSS is very much like OZ….whoops that was another article … I meant to say very much like a Harley Davidson.  Both are easily customizable, and if done with taste and flair can create a beautiful piece of art. 

    Take for example a new Harley.  You can buy one factory spec, drive it off the lot, never do a thing to it (other than regular maintenance) and it will always be exactly what it is…a Harley Davidson motor cycle.  On the other hand, you can buy a new Harley, drive it home, break out the wrenches, get some feedback from other Harley enthusiasts and then go to work customizing/personalizing your ride.

    The same could be said for a web site.  It can be built to factory spec (in this case W3C specifications), never do a thing to it (other than regular updates) and it will always be exactly what it is supposed to be…an accessible no nonsense web site.  On the other hand, you can build your new site, break out the any one of the many wonderful CSS manuals (Eric Meyer, Monsieur Zeldman), get some feed back from other CSS/design enthusiasts and then go to work customizing/personalizing your site.

    Using an image as an hover underline (as long as it’s tasteful) is no different than putting a killer set of aluminum wheels on a brand spanking new Harley Davidson Softail.  It’s called customization.  And that’s a good thing….when done properly.  Unless of course your a dick-head scooter boy and all of this is completely foreign to you.

    Now a “Hack” on the other hand would be akin to putting a Kawasaki front end on a Harley and trying to make it fit.  That would be a Hack.  But only people who knew what they were talking about would get that.  Any body else would be…well…just a scooter boy.  And that’s OK too.  Just don’t come to a site that is clearly devoted to people who study this shit for breakfast and try and tell them what they are doing is a hack.  It’s not a hack…it’s customization.

    I say well done Stuart.  Thanks for sharing.

    Copy & paste the code below to embed this comment.
  8. Well spoken. To wax a bit hippie, the web is about freedom. If it takes a bit of creative programming to pursue this freedom, then so be it. Most of us got into the computer foray because we like to tackle problems and solve them in creative ways, even if that requires some intersting contortions and purposeful misapplication of code. It seems that a great deal of the discussion posters are concerned with standards compliance, and that’s fine. Just understand that not everyone shares your opinion.

    Copy & paste the code below to embed this comment.
  9. The bit of fun patiently explained in the article used valid HTML and valid CSS, subjects of mutual interest. Fun should be shared and the author and ALA did exactly that.

    Something first created as amusement often finds itself applied to serious, unforeseen purposes.

    I have to thank that person who refered to this valuable ALA resource as an “idiot magnet.”  Until I read that statement, I was blissfully unaware of its truth, at least in one case.

     

    Copy & paste the code below to embed this comment.
  10. Stuart R. wrote. “Blink was reported to cause some people with epilepsy to have seisures. I think it’s possible that some animated gif files could produce the same effect.”

    It’s highly unlikely that a small piece of blinking text would cause a seizure, though larger animated GIFs and Flash definitely could. I think the accessibility recommendations against blink were more targeted at people with extreme cases of ADD. The distraction of constantly blinking text could keep some readers from absorbing the content, though I don’t think the animated example would cause a problem because it only affects the focused area anyway. There is also inconsistency in the browser implementation of blink.

    Of course, this all depends on the developer’s use of animation and blinking elements. Like all things it can ber used to benefit, or it can be abused.

    Copy & paste the code below to embed this comment.
  11. and a bag of chips.

    Copy & paste the code below to embed this comment.
  12. 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.
  13. 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.
  14. 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.
  15. >>>>
    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.
  16. 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.
  17. 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.
  18. Great, now Safari 1.2 shows animated underline! :]
    (Oh, really useful site, compliments)

    Copy & paste the code below to embed this comment.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. i like this, but don’t know if i will use it

    Copy & paste the code below to embed this comment.
  32. 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.
  33. 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.
  34. 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.
  35. 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.
  36. 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.