為 a:hover 的連結和底線指定不同的顏色

原理：
連結所使用的文字先套上 <span> 再套上 <a>，
連結的文字顏色，由 <span> 使用 CSS 的 color 設定；
底線的顏色，由 a:hover 使用 CSS 的 color 設定。

範例：

<style>

/* 準備工作：移除連結的底線，僅在 a:hover 時給連結加上底線 */
a {text-decoration:none}
a:hover {text-decoration:underline}

/* 底線的顏色 */
a:hover {color:red}

/* 連結的文字顏色 */
a span {color:blue}

</style>
<a href="http://www.google.com.tw"><span>連結所使用的文字</span></a>

滑鼠移動到連結上面時，所顯示的效果：
連結所使用的文字

若您希望滑鼠移動到連結上面時，連結的文字顏色改變，就使用 CSS 設定 span:hover 的 color。範例：

<style>

/* 準備工作：移除連結的底線，僅在 a:hover 時給連結加上底線 */
a {text-decoration:none}
a:hover {text-decoration:underline}

/* 底線的顏色 */
a:hover {color:red}

/* 連結的文字顏色 */
a span {color:blue}

/* 滑鼠移動到連結上面時，連結的文字顏色改變 */
a span:hover {color:green}

</style>
<a href="http://www.google.com.tw"><span>連結所使用的文字</span></a>

滑鼠移動到連結上面時，所顯示的效果：
連結所使用的文字