Whereas internet designers typically have quite a lot of management over how a doc
must be offered, fundamental CSS doesn’t present many choices for the type of
underlines beneath the hyperlinks on a web page. However with just a few
nips and tucks, you may take again artistic management of the best way your
hyperlinks look.
Article Continues Under
Customized underlines enable for new artistic alternatives that could be
applicable for some web sites. They may also be used to supply
extra visible cues to the variations between the varieties of hyperlinks contained
in a doc.
You need to begin by making a graphic in your underline. This graphic will
repeat horizontally, and in order for you the background to point out by way of you’ll
have to create a clear .gif file.
In case your underline graphic is quite a lot of pixels tall, you must improve
the line-height of your textual content so as to add extra space between the underside of 1 line
and the highest of the subsequent:
p { line-height: 1.5; }
Earlier than we will create the customized underline for our hyperlinks, we have to take away
the prevailing one:
a { text-decoration: none; }
To create the customized underline, we’ll set a background picture for the hyperlink
factor:
a { background-image: url(underline.gif); }
We would like this graphic to repeat horizontaly alongside the underside of our textual content however
not vertically, or it could seem behind the hyperlink textual content itself. We’ll restrict
the background picture to repeat alongside the x-axis:
a { background-repeat: repeat-x; }
To make sure that our graphic seems beneath the hyperlink textual content, no matter font-size,
we’ll use the background-position property to put the picture on the backside
of the hyperlink factor. For some background graphics resembling arrows, you could
have a choice for the aspect of the factor to which the picture is aligned.
For our instance, we’ll place our background on the backside proper:
a { background-position: 100% 100%; }
To create house for the customized underline graphic beneath the hyperlink textual content, we’ll
add some padding. The precise place of the underline graphic relative
to the baseline of the hyperlink textual content will range relying on the font measurement being
used. It’s prompt that you simply begin with a bottom-padding equal to the peak
of your underline graphic and modify to fit your wants:
a { padding-bottom: 4px; }
Because the underline graphic is positioned on the backside of the hyperlink factor,
we have to be sure that our hyperlinks don’t span a number of traces. (In the event that they had been allowed to span
a number of traces, then solely the
linked textual content on the decrease line would show the customized underline.) We’ll use
the CSS white-space property to forestall our hyperlink textual content from wrapping.
a { white-space: nowrap; }
All the CSS properties for the hyperlink factor may be mixed:
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
If you’d like the customized underline impact to look solely throughout rollovers, merely
set the CSS background properties to the :hover pseudo-class as a substitute of instantly
on the hyperlink factor.
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
Listed here are some examples of customized underlines that may be created with this
approach:
This static underline and this rollover
impact would possibly match a stylish design.
This static underline and this rollover
impact are groovy, child.
This static underline and this animated rollover may very well be used to point out exterior hyperlinks. (Animation results should not seen in each browser; some, resembling Safari 1.0, present solely the primary body.)