By CSS-Tricks
You may know this classic style very well.
This is a big old really long link
The text and underline are both the same color and on hover, they both change together. Here are some alternatives to this default style.
This is a big really long link
This example uses the border-bottom property with a 1px of padding-bottom for a nice subtle effect. Note that the text changes color on rollover but the underline does not.
Here is the code:
a {
text-decoration: none;
border-bottom:1px #75abea solid;
padding-bottom: 1px;
}
This is a big really long link
This is the same as #1, only shows that you can control the color of the text and the underline individually on rollover.
Here is the code:
a:hover {
color: green;
border-bottom: 1px solid red;
}
This is a big old really long link
This style is achieved just by a background image.
Here is the code:
a {
text-decoration: none;
background: url(link-line.gif) repeat-x 0 100%;
padding-bottom: 1px;
}
Giving the background position of x:0 and y:100% places the background image at the bottom of the text and by setting the padding-bottom to 1px, we make the distance between the text and the background image 1px.
Thanks for Jermayn Parker pointing out that some people do turn images of, so using border-bottom method seems fine instead of using a background image for this effect. But also using a background image property gives us more power on underlines and opens our way for new effects, check out the following example.
In this example the graphic used for underline has a bit of a gradient to it.
This is a long long link, super cala fragilistic expialidocious