text-decoration

下線などの装飾

文字に下線・上線・取り消し線を付けたり、リンクの下線を消したりします。線の色・形・太さも指定できます。

サンプルコード

HTML

1<a href="#">ふつうのリンク</a>

2<a href="#" class="none">下線なしのリンク</a>

3波線の下線

4<del>¥600</del> ¥480

CSS

1.none {

2 text-decoration: none;

4.wavy {

5 text-decoration: underline wavy #c0392b;

6 text-underline-offset: 4px;

ブラウザでの表示

text-decoration は、文字に線を付けたり消したりするプロパティです。リンクの下線を消す text-decoration: none は特によく使います。

線の種類（underline など）・形（wavy など）・色を、スペース区切りでまとめて指定できます。

text-underline-offset で下線と文字の距離を、text-decoration-thickness で線の太さを調整できます。

普段は下線を消し、マウスを乗せたときに表示します。

HTML

1<a class="link" href="#">詳しく見る</a>

CSS

1.link {

2 text-decoration: none;

4.link:hover {

5 text-decoration: underline;

6 text-underline-offset: 3px;