A List Apart: Comments on: CSS Design: Custom Underlines

Posted by: zed

2012-01-31T13:00:49+00:00

Its the equivalent of the blinking text all over again!!

Posted by: paperwings

2012-01-31T13:00:49+00:00

Nice non-hackey application of CSS. What was so freakin wrong with blink? I never understood that. It seems like something that was a non-issue was so overdramatized that the stigma associated with it was inflated beyond necessity. I mean, they really really never bothered me.

Posted by: Stuart

2012-01-31T13:00:49+00:00

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. This technique doesn't require you to use animated .gif files. You could design very subtle custom underlines if you wish (eg. double-underline). If you wanted to give your visitors options, you could use a style-sheet switcher as well.

Posted by: Patrick Griffiths

2012-01-31T13:00:49+00:00

I get more questions about the damned animated underlines in my Zen Garden design than I do about the whole Elastic nature of it (see http://www.alistapart.com/articles/elastic/ ). Now I can point people here. Nice one.

Posted by: CM Harrington

2012-01-31T13:00:49+00:00

Considering this isn't a true underling, I think it qualifies as a hack. A nice one, to be sure, but the real achilles heel is that it won't wrap properly. This will make very long URLs break layout. A hack can be defined as "something used in a novel manner for which it was never intended" Making background images act as underlines qualifies. That said, it does surprise me that CSS doesn't support arbitrary underline styles [or perhaps it does, and I need to red up a bit more]

Posted by: Patrick Griffiths

2012-01-31T13:00:49+00:00

The intention of CSS was always to present something however the designer wanted to. Just because there is a text-decoration property doesn't mean that styling an underline another way is a hack.

Posted by: Trent Lucier

2012-01-31T13:00:49+00:00

The link in your second paragraph acts strange in IE6 in Windows2K (I haven't tried other versions of IE). It disappears when moused over, then seems to toggle on and off based on mouse-over. Looks fine in Firebird 0.7. I'm at work so I can't spend too much time diagnosing the problem. Just thought I'd bring it you your attention.

Posted by: Rick Yribe

2012-01-31T13:00:49+00:00

There's an error in the CSS: p { line-height: 1.5; } 1.5 what? I'm guessing it should be em's but, yea, without it it doesn't make much sense. Just a heads up.

Posted by: scott

2012-01-31T13:00:49+00:00

any tips to disable this for images wrapped in links?

Posted by: Chris Vincent

2012-01-31T13:00:49+00:00

Somebody even asked [em]me[/em] how you did your animations.

Posted by: Chris Vincent

2012-01-31T13:00:49+00:00

My bad: Somebody even asked *me* how you did your animations. http://dris.dyndns.org:8080/archives/431/index.html#c193

Posted by: beto

2012-01-31T13:00:49+00:00

Anyone with fair knowledge of CSS would have been able to figure this one out, but Stuart's tutorial makes it quite easy to understand for CSS beginners. As in all gimmicks made possible by CSS, they are best when used sparingly and when it makes real sense.

Posted by: Peterman

2012-01-31T13:00:49+00:00

>>> A hack can be defined as "something used in a novel manner for which it was never intended" Making background images act as underlines qualifies. <<< No, it doesn't. What you're doing is that you're telling the browser "I want this image to be shown at the bottom of text links", and you're doing it with standard CSS properties in EXACTLY the ways they were *INTENDED* to be used. It seems to me that hacks are more and more often defined as "Anything that shows that CSS can actually be both useful and cool, because hey, we all know it isn't, so if someone proves that it is, it's gotta be a hack." ;)

Posted by: CM Harrington

2012-01-31T13:00:49+00:00

One could go on all day doing that. Something I don't understand is that somehow the term "hack" has become a dirty word in Designer CSS parlance. I've always travelled in geek circles, where the term itself has no connection to "good" nor "bad". See http://catb.org/~esr/jargon/html/H/hack.html for more details. I say it's a hack, and a good-but-not-perfect one. After all, it forces you to make sure your links don't wrap in order for it to work properly.

Posted by: Matt Burris

2012-01-31T13:00:49+00:00

I don't see what the fuss is about, considering that the majority, if not all, of the readers of the site knows not to use the blink tag, and thus won't abuse this little CSS trick to create discomfort towards visitors. Used effectively, this can create a subtle visual cue that is creative, and we need all the creativity we can get, these days. The hack or not a hack argument is subjective, everyone has their own definition of what a hack is supposed to be. The idea here is to utilize CSS to its fullest, and until we get CSS3 and all browsers support them, we might as well use whatever we can get.

Posted by: apartness

2012-01-31T13:00:49+00:00

Rick Yribe wrote: >> There's an error in the CSS: >> p { line-height: 1.5; } >> 1.5 what? I'm guessing it should be em's but, yea, without it it doesn't make much sense. There is no error. 1.5 is perfectly legitimate per CSS1. It means 1.5 times the base value. You can of course write 1.5em or 150% if you prefer. You may even want to do so to avoid tripping up browsers that misunderstand CSS1 and handle plain old 1.5 incorrectly. But there is nothing at all wrong with the CSS as written. It is correct, valid, and well-formed per W3C specs.

Posted by: Levix

2012-01-31T13:00:49+00:00

I just viewed the Elastic Lawn on CSS Zen Garden ( http://www.csszengarden.com/?cssfile=/063/063.css ) in IE 5.2 on the Mac. By zooming the text size all the way up (300%) with the browser, I was able to get one of the links to wrap across 2 lines. I noticed that the custom underline w/ animated hover effect worked just fine, even with the text wrapping. Worked in Safari too. I haven't tried this in other browsers. Can someone expand on why wrapping of links is not recommend with the technique in this article? Which browsers does it cause problems with? Was the Elastic Lawn constructed using a different method that doesn't suffer from wrapping problems, or does it break in some browsers? (I admit I haven't compared the code) Just curious. BTW, a major difference between animated hover links and blinking text is that the former only animate when the user actively rolls over a link. Conversely, blinking text blinks all of the time. This can be extremely distracting when trying to read the content of the page. On the other hand, I actually appreciate visible cues when I roll over an active link. Nice technique!

Posted by: apartness

2012-01-31T13:00:49+00:00

A web design method that uses CSS as it was intended to be used is not a hack. Nor is it a shoe rack, a nose-hair, or a steaming cup of clam chowder. A man might mistake his wife for a hat, but she is still his wife and not a hat. If he grows red in the face insisting that his wife is a hat, then he is merely a red-faced man who has mistaken his wife for a hat. Some people understand what CSS hacks are, and choose to use them in order to work around a particular browser�s deficiencies while still producing marketable, standards-based site designs. Some others, who also understand what CSS hacks are, choose not to use them for fear that doing so might create problems in future browsers � a fear that intelligent people can debate in either direction. There�s a third group of people whose understanding of what constitutes a �CSS hack� is entirely inaccurate from a �fact-based� or �reality-driven� point of view. In other words, they don�t know what they�re talking about. Oddly, this group seems to talk the loudest. To them we say: �Sir, stop shouting. Your wife is not a hat.� An upcoming ALA issue will discuss this issue with more seriousness and in greater detail.

Posted by: Stuart

2012-01-31T13:00:49+00:00

The technique in the article floats an image at the bottom of the link element. When lines wrap, only the bottom line of text would get the custom underline. The alternate method involves matching the height of the background image to the height of your text including line spacing. This only works when you can control the size of the text... which isn't possible for all browsers. While it does let you have custom underlines for links that wrap... it's much faster and easier to use white-space: nowrap.

Posted by: Johnson

2012-01-31T13:00:49+00:00

Levix: [quote] I just viewed the Elastic Lawn on CSS Zen Garden ( http://www.csszengarden.com/?cssfile=/063/063.css ) in IE 5.2 on the Mac. By zooming the text size all the way up (300%) with the browser, I was able to get one of the links to wrap across 2 lines. I noticed that the custom underline w/ animated hover effect worked just fine, even with the text wrapping. Worked in Safari too. I haven't tried this in other browsers. [/quote] Following Levix's lead I also opened up IE6/Win, loaded the 'Elastic Lawn' CSS Zen Garden submission, and jacked up the font size. Links that wrapped ended up having no graphical underline at all. It's not a huge problem as the links still stood out by their colour, but it does create some continuity issues. My point it 'white-space: nowrap' is probably the way to go. Though it can break some layouts with especially long links, it also preserves the look of the links and the continuity of the page.

Posted by: Josh Peters

2012-01-31T13:00:49+00:00

This is even nicer when you use stylesheets to replace the underlining of the tag. This way, even text-only readers still get the point of underlined text.

Posted by: Martijn ten Napel

2012-01-31T13:00:49+00:00

I think the key is in the second paragraph of the article: "Custom underlines allow for new creative opportunities that might be appropriate for some websites" As such this is a great reference article for using a CSS technique to make it all a bit more visually swinging while retaining a valid clean markup that can also be read on anything that eats HTML without the CSS.

Posted by: Justin

2012-01-31T13:00:49+00:00

"There is no error. 1.5 is perfectly legitimate per CSS1. It means 1.5 times the base value." But most of us use CSS2: From http://www.w3.org/TR/CSS2/syndata.html#length-units: " The format of a length value (denoted by in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a (with or without a decimal point) immediately followed by a unit identifier (e.g., px, deg, etc.). After the '0' length, the unit identifier is optional."

Posted by: Michael

2012-01-31T13:00:49+00:00

If a site validates without the unit of measurement, then said unit is unecessary.

Posted by: apartness

2012-01-31T13:00:49+00:00

Per the W3C and CSS2, the unit identifier is not needed when specifying line-height: http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height W3C example: DIV { line-height: 1.2; font-size: 10pt } /* number */ Per the W3C and CSS2, the unit of measurement is not needed; the article's CSS is formatted correctly.

Posted by: ARJ

2012-01-31T13:00:49+00:00

I suppose a very limited way of allowing underlines to wrap would be to fix the font size and line height, and then calculate the result to define the image's height. Then you could allow it to repeat and it should appear to "wrap". Obviously this gets broken as soon as the text size changes, so it's not a very good solution, but I did throw together a quick proof of concept here: http://www.geekicon.net/geek/underlines.html

Posted by: Stuart

2012-01-31T13:00:49+00:00

I had originally used the technique on my site with lines wrapping just as you describe. I decided accomodating resizable fonts was preferable and changed the code.

Posted by: Sam

2012-01-31T13:00:49+00:00

The useful part: One little problem with these underlines is that a line which contains a link will have more vertical padding than the others - not to pretty. -ve margins once again come to rescue. (-ve margin magic is one of the biggest non-philosophical reasons why i switched to tableless design) A { /* bla bla bla */ padding-bottom: 3px; margin-bottom: -3px; /* bla bla bla */ } note - I haven't tested this all that much... The useless bickering ;) The word 'hack' in the context of CSS or any other engineeringish thing, means many different things - it's more akin to the word 'beautiful' than 'hat', and therefore the red-faced husband is less misguided than others might have thought. CSS is a styling language, the semantic content of a page is supposed to be HTML so "it doesn't use the text-decoration" arugments, which are rooted in "semantic inappropriateness" are a little misguided. However, the multiple line thingime does kind of a make it a hack IMO, because there is some broken functionality. On that note, a background-wrap CSS attribute for inline elements would be doubleplus handy.

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

Ok, put on your radiation suits. This one might hurt... When I first found A List Apart I realized it was not as good as its design. I quickly agreed with PPK's understatement: ALA favors childish, wow-factor scripts. I made two statements that stabbed ALA in the heart: "A List Apart is nothing more than pages with blah-blah wannabe web developer text with pretty pictures at the top", and I called ALA an "idiot magnet". When reading the JIR article comments, I saw one comment and got really mad then laughed. Anne said yelled at us for not using the content decleration for FIR. IT DOESN'T WORK ON IE!! Like it or not, IE is the most used browser. ALA straight up ignores that. I tried to change ALA's rep by submitting a good article about combining Microsoft's and the W3C dom's. They wanted to "respectfully decline" because it was browser-specific. So I said f**k them. I'm trying to help, and they ignore that IE is the most used browser (like I said, it still is no matter if it might suck a little). I find it unfair that Zeldman gets to write any article he wants and have it published. I severly slammed Stuart's article about Accesskeys at www.jstimes.vze.com. Another thing, you seem to solve all your CSS problems with a bloody STYLE SHEET SWITCHER!! That's the easy way ouy. One last thing: I get yelled at for using HTML for presentation, particularly by PTG (which is such a ripoff of PPK). But if all of you can't stop using CSS for behaviour, you're gonna see a lot of FONT tags showing up on my webpages. Dante has spoken. I needed to say that.

Posted by: michael

2012-01-31T13:00:49+00:00

Well first of all, addressing Dante, your comment/rant is inappropriate, doesn't address the article, and doesn't really make a point other than to say you you dislike ALA, yet feel they owe you something because apparently YOU are the only person who can raise their articles to some perceived respectable level. I don't know you, but I'd suggest you talk less and listen more. Let me point something out to you--ALA does not ignore that IE is the most used/popular browser. What they do is encourage designers and developers to find solutions that work in as many browsers as possible, predicated by the logic that it is up to the designer/developer to know their audience. While IE may be the browser-of-the-hour, that may not always be the case, so a browser-specific solution to a problem not only doesn't work for everyone, it doesn't help everyone, and may eventually need to be stripped out for a more broad-based solution. You have an opinion about the article, that's fine, this is the place to voice it; you have an opinion about ALA and the work they do, then voice it where it's appropriate--on your own website. Secondly, addressing Justin's concerns about an error in the CSS syntax, and simply backing up what his apartness has already said--Justin, your own link should have provided you with the answer had you just scrolled up to the previous section (4.3.1 Integers and real numbers - http://www.w3.org/TR/CSS2/syndata.html#q13 ). is an accepted value for certain CSS properties, as is . Its use is not always correct, but it is correct for such properties as line-height, and font-size-adjust.

Posted by: Eric

2012-01-31T13:00:49+00:00

AWESOME. You guys are geniuses!

Posted by: Paul

2012-01-31T13:00:49+00:00

Just a quick note that the final --animated-- example in the article works fine in Safari 1.2 (released around Feb 3).

Posted by: nasu

2012-01-31T13:00:49+00:00

Just wanted to let you know that the animated rollover works fine in he new version of Safari (1.2).

Posted by: Branko Collin

2012-01-31T13:00:49+00:00

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.

Posted by: apartness

2012-01-31T13:00:49+00:00

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.

Posted by: apartness

2012-01-31T13:00:49+00:00

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.

Posted by: Ray McKenzie

2012-01-31T13:00:49+00:00

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.

Posted by: paperwings

2012-01-31T13:00:49+00:00

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.

Posted by: Brett Merkey

2012-01-31T13:00:49+00:00

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.

Posted by: James Craig

2012-01-31T13:00:49+00:00

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.

Posted by: no

2012-01-31T13:00:49+00:00

and a bag of chips.

Posted by: Mikko Lahti

2012-01-31T13:00:49+00:00

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.

Posted by: Carsten Altena

2012-01-31T13:00:49+00:00

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.

Posted by: Peterman

2012-01-31T13:00:49+00:00

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. :)

Posted by: CM Harrington

2012-01-31T13:00:49+00:00

>>>> 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.

Posted by: Tanny O'Haley

2012-01-31T13:00:49+00:00

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.

Posted by: Adam Khan

2012-01-31T13:00:49+00:00

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.

Posted by: Lock

2012-01-31T13:00:49+00:00

Great, now Safari 1.2 shows animated underline! :] (Oh, really useful site, compliments)

Posted by: web novice

2012-01-31T13:00:49+00:00

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.

Posted by: Nathalie Sequeira

2012-01-31T13:00:49+00:00

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!

Posted by: Esmerelda

2012-01-31T13:00:49+00:00

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

Posted by: The Bead Man

2012-01-31T13:00:49+00:00

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

Posted by: Kevin Davis

2012-01-31T13:00:49+00:00

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?

Posted by: Stuart

2012-01-31T13:00:49+00:00

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.

Posted by: bea

2012-01-31T13:00:49+00:00

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

Posted by: Stuart

2012-01-31T13:00:49+00:00

You can control the spacing between the background image and the text by changing the padding. Try padding-bottom: 6px;

Posted by: ffub

2012-01-31T13:00:49+00:00

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 [url="/pic"]/pic[/url] 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.

Posted by: Brenda

2012-01-31T13:00:49+00:00

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.

Posted by: Jason Chandler

2012-01-31T13:00:49+00:00

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

Posted by: Dante-Cubed

2012-01-31T13:00:49+00:00

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.

Posted by: mac

2012-01-31T13:00:49+00:00

i like this, but don't know if i will use it

Posted by: Compie

2012-01-31T13:00:49+00:00

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

Posted by: web novice

2012-01-31T13:00:49+00:00

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.

Posted by: Web Designer

2012-01-31T13:00:49+00:00

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.

Posted by: Tom

2012-01-31T13:00:49+00:00

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?

Posted by: Tom

2012-01-31T13:00:49+00:00

I failed to mention the site I was viewing. http://www.csszengarden.com/?cssfile=/063/063.css