Customized Underlines – A Listing Aside

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

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

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

Leave a Comment