CSS本身沒有直接提供變換HTML鏈接下劃線的功能，但只要運用一些技巧，我們還是可以讓單調的網頁鏈接下劃線變得豐富多彩。
一、基本原理
首先，自定義HTML鏈接下劃線的第一步是創建一個圖形，在水平方向重復放置這個圖形即形成下劃線效果。如果要顯示出下劃線背后的網頁背景，可以使用透明的.gif圖形。
其次，如果下劃線圖形的高度較大，則必須適當增加文本的高度，使得一行文本的底部與下一行文本的*部之間有較大的空間，例如p { line-height: 1.5; }。
如果要讓自定義下劃線只在鼠標停留時出現，只要把原來直接設置在鏈接元素上的CSS background屬性改到:hover ，例如：
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
二、實例欣賞
假設有兩個下劃線圖形diagonal.gif（波紋線）、flower.gif（花朵）前者的高、寬是3、9，后者的高、寬是11、15。下面是一個設置兩種下劃線的完整實例：
網頁源代碼如下：
注：diagonal.gif 和 flower.gif已經先拷貝到網頁所在的同一目錄下。
<html>
<head>
<title>ex</title>
<style type=”text/css”>
a#example1a {
text-decoration: none;
background: url(diagonal.gif) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 2px;
}
a#example1b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 2px;
}
a#example1b:hover {
background: url(diagonal.gif) repeat-x 100% 100%;
}
a#example2a {
text-decoration: none;
background: url(flower.gif) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px;
}
a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}
a#example2b:hover {
background: url(flower.gif) repeat-x 100% 100%;
}
–>
</style>
</head>
<body>
<p>實例：</p>
<p> <a href=”#” id=”example1a”>波紋線靜態下劃線</a>，
<a href=”#” id=”example1b”>鼠標停留時出現的波紋線</a>。</p>
<p> <a href=”#” id=”example2a”>花朵靜態下劃線</a>，
<a href=”#” id=”example2b”>鼠標停留時出現的花朵下劃線</a>。</p>
</body>
</html>