在能为链接创建自定义下划线之前，我们需要移除已经存在的下划线：

a { text-decoration: none; }

-------------------------------------------------

[补充]

语法：

　　text-decoration : none || underline || blink || overline || line-through

取值：

　　none  : 默认值。无装饰
　　blink  : 闪烁
　　underline  : 下划线
　　line-through  : 贯穿线
　　overline  : 上划线

说明：

　　检索或设置对象中的文本的装饰。
　　有 href 特性的 a ，以及 u ， ins 对象默认值为 underline 。
　　对象 strike ， s ， del ，默认值是 line-through 。
　　假如 none 值在属性声明的最后，所有的先前的其他取值都会被清除。例如，声明 text-decoration: underline overline blink none 等于声明 text-decoration: none 。
　　假如对象没有文本(如 img 元素)或者是空元素(如：<EM></EM>)， 此属性不会发生作用。
　　假如你设置 body 对象的此属性值为 none ， a 对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。
　　指定块对象的此属性将影响其所有内联子对象。而此影响一旦发生，块对象容器最终会受到影响。
　　在IE4+中可用的值为 overline 和 blink 。虽然 blink 值被提供，但它不会被作用。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 textDecoration 。

-------------------------------------------------

　　为了创建自定义的下划线，我们为链接元素设置背景图像：

a { background-image: url(underline.gif); }

-------------------------------------------------

[补充]

语法：

　　background-image : none | url ( url )

取值：

　　none  : 默认值。无背景图
　　url ( url )  : 使用绝对或相对 url 地址指定背景图像

说明：

　　设置或检索对象的背景图像。
　　当背景图像与背景颜色( background-color )都被设定了时，背景图片将覆盖于背景颜色之上。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 backgroundImage 。

-------------------------------------------------

　　我们希望这个图像在文本底部顺着水平方向重复而不是垂直方向，否则它就将显示在链接文本自身的后面。我们限制背景图像沿着X轴重复：

a { background-repeat: repeat-x; }

-------------------------------------------------

[补充]

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

取值：

repeat  : 默认值。背景图像在纵向和横向上平铺
no-repeat  : 背景图像不平铺
repeat-x  : 背景图像仅在横向上平铺
repeat-y  : 背景图像仅在纵向上平铺

说明：

　　设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 backgroundRepeat 。