リンクの下線を装飾する
<html><head><title>リンクの下線を装飾する</title></head>
<body>
<br>
<a href="#" style="border-bottom:3px #0000FF double;text-decoration:none;">二重線のリンク</a>
<a href="#" style="border-bottom:1px #0000FF dashed;text-decoration:none;">破線のリンク</a>
<a href="#" style="border-bottom:3px #0000FF dotted;text-decoration:none;">点線のリンク</a>
<a href="#" style="text-decoration:none;">下線なしのリンク</a><br>
<br>
<br>
<br>
<a href="#" style="padding-bottom: 0px; border-bottom: 1px #0000FF solid;text-decoration:none;">距離0、太さ1のリンク</a>
<a href="#" style="padding-bottom: 0px; border-bottom: 2px #0000FF solid;text-decoration:none;">距離0、太さ2のリンク</a>
<a href="#" style="padding-bottom: 3px; border-bottom: 1px #0000FF solid;text-decoration:none;">距離3、太さ1のリンク</a>
<a href="#" style="padding-bottom: 3px; border-bottom: 3px #0000FF solid;text-decoration:none;">距離3、太さ3のリンク</a><br>
<br>
<br>
<br>
<a href="#" style="padding-bottom: 0px; border-bottom: 1px green solid;text-decoration:none;">緑色の下線リンク</a>
<a href="#" style="padding-bottom: 0px; border-bottom: 1px orange dashed;text-decoration:none;">赤色の下線リンク</a>
<a href="#" style="padding-bottom: 0px; border-bottom: 3px gray dotted;text-decoration:none;">灰色の下線リンク</a>
</body>
</html>
リンクの下線を装飾するスタイルシートです。
実際にはリンクの下線に大幅な装飾はできません。ですがこの小ワザでは、スタイルシートの囲み枠の下部分だけ表示することで、あたかも下線のように見せています。
▼padding-bottom
テキストと下線（枠線の下部分）との距離を指定します。
▼border-bottom
下線（枠線の下部分）の太さ、色、状態を指定します。
border-bottom: 1px #0000FF solid; 太さ1、#0000FFの色、一本線
border-bottom: 1px green double; 太さ1、緑色、二重線
border-bottom: 1px orange dashed; 太さ1、オレンジ色、破線
border-bottom: 3px gray dotted; 太さ3、灰色、点線
▼text-decoration:none;
この小ワザでは囲み枠の下部分だけ表示し、それをあたかも下線のように見せています。なので本来のリンクの下線を消します（消さないと線が余計に出る）。
どの種類を使うにしても、このtext-decoration:none;の記述は必要となります。
ここではひとつひとつの<a>タグにstyleを記述しましたが、すべて同じ装飾をするのであれば、<head></head>内に
<style type="text/css">
<!--
a.linkdeco { padding-bottom: 0px; border-bottom: 3px gray dotted;text-decoration:none; }
-->
</style>
というように記述し、<body></body>内の<a>タグにて
<a href="" class="linkdeco">
と、記述すればOKです。
ホームページ作成ガイド
ホームページ作成ガイド