css為網頁設計者們提供了豐富而靈活的頁面元素表現形式的控制手段。但是，或許你可能注意到了，對於下劃線，
css提供的可選操作卻不是很多。一般情況下，人們看到的下劃線基本上都是橫直線，缺少生氣和靈動。不過，路並不是死的，通過一些絕妙的改造，我們還是可以做出富有創意的下劃線來使頁面更為美觀。
這是乙個自定義下劃線的例子：自定義的下劃線 。是不是很酷呢？除了能讓你的網頁呈現出乙個與眾不同的風格之外，它還能對於文件中不同的文字型別給與不同的視覺外觀，起到提醒或者著重的作用。
下面我們就來一起學習如何自定義與眾不同的下劃線。
首先，我們得先準備一幅作為下劃線的。你可以利用先成的，也可以自己動手繪製。需要提醒注意的是，你所準備的應該適合水平方向上的重複，最好還能使透明的gif格式，這樣能夠確保背景不被遮擋。
p
接下來要做的事情是取消原來預設的下劃線，這樣我們才能把自定義的下劃線應用到指定文字，使用如下的css設定（它的含義是讓超連結文字沒有任何修飾）：
a
a
a
還有個必須考慮的問題，就是字的大小改變怎麼辦？要讓下劃線的始終顯示在超連結文字的下方，而不必理會文字大小的話，我們應當使用css中的背景位置（background-position）屬性來定位位於超連結元素色底部。而對於如箭頭這樣的下劃線，還得考慮超連結的文字邊緣和邊對齊。 下面的這個例子將下劃線背景的位置限定在右下角：
a
如何控制自定義的下劃線和文字之間的空白呢？這個可以通過增加填充（padding）來做到。下劃線相對於超連結文字基線（baseline）的確切位置以來與所用的字的大小。建議你一開始將底部填充（bottom-padding）的大小設定同下劃線的高度相等，然後再慢慢調整到合適位置（下面這個css設定超連結的底部填充為4畫素）：
a
因為下劃線的被定位在超連結元素的底部，所以需要確保所用的超連結文字沒有跨行，否則，只有處在最下面的超連結文字會出現自定義的下劃線了。怎麼解決呢，那就是阻止超連結文字跨行產生，可以通過css的white-space屬性來完成：
a
好了，把上面提到的這些超連結標記的css設定合併起來，結果如下：
a
還記得有些超連結文字沒有下劃線，但是當滑鼠移到它的上面的時候，下劃線就浮現出來的情況麼？自定義的下劃線也可以做到這個效果，那就在:hover上設定超連結背景，而不是在超連結標記a上設定，如下：
a
a:hover
怎麼樣，是不是很簡單呢？在來看看一些例子和它們對應的css設定：
靜態下劃線
a#example3a
浮動效果下劃線
a#example3b
a#example3b:hover
靜態下劃線
a#example4a
浮動花朵效果下劃線
a#example4b
a#example4b:hover
靜態箭頭下劃線
a#example1a
浮動動畫箭頭下劃線 （這裡箭頭會出現滾動，不過這一滾動的效果只在部分瀏覽器中看得到）
a#example2b
a#example2b:hover
利用CSS自定義網頁超連結下劃線樣式
巧妙利用css自定義網頁下劃線樣式 實現方法很簡單，在源 的和之間加上如下的css語法控制 text decoration none background url underline.gif repeat x 100 100 padding bottom 4px white space nowrap...
全網頁CSS 超連結無下劃線
在乙個網頁中有若干對文字a超連結錨文字，但預設情況下帶鏈結文字是有下劃線效果的。如何使用css實現超連結無下劃線樣式呢？通過css設定要想讓帶超連結錨文字字型文字預設下劃線消失，我們需要css樣式單詞text decoration去掉下劃線。具體去掉全網頁預設鏈結下劃線實現無下劃線css 如下 a ...
如何自定義listview自帶下劃線的長度和顏色
有時候我們的listview當中需要實現listview下劃線顏色和長度的改動，怎麼做呢？xml直接改 1.在drawable下建立乙個自定義的布局，我的是 list divider.xml xml version 1.0 encoding utf 8 xmlns android android r...