Personalize the hyperlink with a picture

Don't be surprised if you see an underscore link in the picture. Because it's really simple, you can do it.
come here and see the actual effect Http://5key.net/demo/hyperlink-underline


First, let's talk about how this colored underline is made. You might have guessed, a background picture of a gradient. That's right! This is the picture below.

Then look at the following CSS, the whole link change effect I think you should have understood it.
If it's not too clear. Let's take a look at the sliding door concept body {
font-size:14px;
Font-family:helvetica, Sans-serif;
padding:10px;
margin:0px;
}
h1{margin:0; padding:0; font-size:16px;}
p{padding:20px 0 0 0;}
a{
*padding-bottom:1px;
Text-decoration:none;
}
a:link{
Color: #06F;
Background:url (1.gif);
Background-repeat:repeat-x;
Background-position:0 16px;
}
a:visited{
Color: #06f;
Background-image:url (1.gif);
Background-repeat:repeat-x;
Background-position:0 16px;
}
a:hover{
Color: #039;
Background:url (1.gif) repeat-x 0 bottom;
}