テキスト装飾を定義する

CSS - text-decoration

概要

CSSプロパティの「text-decoration」は、テキストに下線、上線、取り消し線などの装飾を定義することができます。また複数の値を指定することが可能なので、下線と取り消し線を組み合わせて使用することもできます。

ただ注意点として、テキスト装飾をブロック要素で定義した場合は、その中の子孫要素にも適用されます。このふるまいについては、サンプルを使って説明していきます。

説明
none 装飾なし
line-throughテキストに打ち消し線
underline テキストに下線
underline red テキストに赤色の下線
wavy redテキストに赤色の波状下線

実用における注意点

適用範囲について

親ブロックで定義した場合、その中の子孫要素にも適用されますが、子孫要素で適用された効果を打ち消すことはできませんので注意が必要です。

<p class="parent">テキストに<span class="children">下線</span>が引かれますが、打ち消すことはできません。</p>
<p class="parent">テキストに<span class="children2">下線</span>が引かれ、さらに打ち消し線が追加されました。</p>
<style>
p {
  background-color: #def;
  margin-bottom: 10px;
}
/* 親要素で下線装飾をします */
.parent {
  text-decoration: underline;
}
/* 子孫要素で打ち消すことはできない */
.children1 {
 text-decoration: none;
 }
/* 子孫要素で追加することはできる */
.children2 {
  text-decoration: line-through;
 }
</style>

使用例

<p class="underline">テキストに下線が引かれます</p>
<p class="line-through">テキストに打ち消し線が引かれます</p>
<p class="line-through-red">テキストに赤色の打ち消し線が引かれます</p>
<p class="line-through-underline">テキストに打ち消し線と下線が引かれます</p>
<style>
p {
  background-color: #def;
  margin-bottom: 10px;
}
.underline {
  text-decoration: underline;
}
.line-through {
  text-decoration: line-through;
}
.line-through-red {
  text-decoration: line-through red;
}
.line-through-underline {
  text-decoration: line-through underline;
}
</style>

仕様書

関連CSSプロパティ