スタイルシート［CSS］/リンク/リンク文字の下線を装飾する

border-*** は、枠線の太さ、色、種類をひとまとめに指定するプロパティです。
（*** の部分には、top、right、bottom、left が入りますが、ここでは bottom を使用します。）

a要素にこのプロパティを指定すると、リンク文字の下線を装飾することができます。

※このスタイルを指定する場合は、予め標準の下線を消しておきます。消し方については「リンク文字の下線を消す」をご覧ください。

a {
text-decoration: none;
border-bottom: 1px #0000a0 dotted;
}

border-bottom	下の枠線（太さ、色、スタイル）を指定します

枠線の指定方法については、「枠線の設定をひとまとめに行う」をご覧ください。

使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<p><a href="index.html" id="example1">リンクカテゴリー</a></p>
<p><a href="index.html" id="example2">リンクカテゴリー</a></p>
<p><a href="index.html" id="example3">リンクカテゴリー</a></p>

</body>
</html>

▼これをブラウザで見ると次のように表示されます

リンクカテゴリー

リンク文字の下線を装飾する

border-bottom: ***;

使用例