While web designers generally have a great deal of control over how a document
should be presented, basic CSS doesn’t provide many options for the style of
underlines below the links on a page. But with a few
nips and tucks, you can take back creative control of the way your
links look.
Custom underlines allow for new creative opportunities that might be
appropriate for some websites. They can also be used to provide
additional visual cues to the differences between the types of links contained
in a document.
Getting Started #section2
You should start by creating a graphic for your underline. This graphic will
repeat horizontally, and if you want the background to show through you’ll
need to create a transparent .gif file.
If your underline graphic is more than a few pixels tall, you should increase
the line-height of your text to add more space between the bottom of one line
and the top of the next:
p { line-height: 1.5; }
Before we can create the custom underline for our links, we need to remove
the existing one:
a { text-decoration: none; }
To create the custom underline, we will set a background image for the link
element:
a { background-image: url(underline.gif); }
We want this graphic to repeat horizontaly along the bottom of our text but
not vertically, or it would appear behind the link text itself. We will limit
the background image to repeat along the x-axis:
a { background-repeat: repeat-x; }
To ensure that our graphic appears below the link text, regardless of font-size,
we’ll use the background-position property to place the image at the bottom
of the link element. For some background graphics such as arrows, you may
have a preference for the side of the element to which the image is aligned.
For our example, we will position our background at the bottom right:
a { background-position: 100% 100%; }
To create space for the custom underline graphic below the link text, we will
add some padding. The exact position of the underline graphic relative
to the baseline of the link text will vary depending on the font size being
used. It’s suggested that you start with a bottom-padding equal to the height
of your underline graphic and adjust to suit your needs:
a { padding-bottom: 4px; }
Since the underline graphic is positioned at the bottom of the link element,
we need to ensure that our links do not span multiple lines. (If they were allowed to span
multiple lines, then only the
linked text on the lower line would display the custom underline.) We’ll use
the CSS white-space property to prevent our link text from wrapping.
a { white-space: nowrap; }
All of the CSS properties for the link element can be combined:
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
If you want the custom underline effect to appear only during rollovers, simply
set the CSS background properties to the :hover pseudo-class instead of directly
on the link element.
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
Examples#section3
Here are some examples of custom underlines that can be created with this
technique:
This static underline and this rollover
effect might match a trendy design.
This static underline and this rollover
effect are groovy, baby.
This static underline and this animated rollover could be used to show external links. (Animation effects are not visible in every browser; some, such as Safari 1.0, show only the first frame.)
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
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
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?
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.
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
You can control the spacing between the background image and the text by changing the padding. Try padding-bottom: 6px;
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
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.
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.
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
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.
i like this, but don’t know if i will use it
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
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.
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.
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?
I failed to mention the site I was viewing.
http://www.csszengarden.com/?cssfile=/063/063.css