CSS text-decoration 文字に線を引く/打ち消し線/打ち消し線

nas2017/11/08
説明 text-decorationとは
サンプル 線なし(none)
打ち消し線(line-through)
下線(underline)
上線(overline)
二重線(double)
点線(dotted)
破線(dashed)
波状の線(wavy)

text-decorationとは

text-decorationは、文字に線を引きます。

text-decoration : 線の位置  線の種類  線の色

線の位置は以下を設定します。

none 線は引きません。
line-through 取り消し線を引きます。
underline 下線を引きます。
overline 上線を引きます。

線の種類は以下を設定します。

solid 一重の線
double 二重線
dotted 点線
dashed 破線
wavy 波状の線

 

線なし (none)

<style>
  .p1 {
    text-decoration: none;
  }
</style>
<p class="p1">あいうえお　abcde</p>

 

打ち消し線 (line-through)

<style>
  .p1 {
    text-decoration: line-through;
  }
</style>
<p class="p1">あいうえお　abcde</p>

 

下線 (underline)

<style>
  .p1 {
    text-decoration: underline;
  }
</style>
<p class="p1">あいうえお　abcde</p>

 

上線 (overline)

<style>
  .p1 {
    text-decoration: overline;
  }
</style>
<p class="p1">あいうえお　abcde</p>

 

二重線 (double)

<style>
  .p1 {
    text-decoration: underline double red;
  }
</style>
<p class="p1">あいうえお　abcde</p>

 

点線 (dotted)

<style>
  .p1 {
    text-decoration: underline dotted red;
  }
</style>
<p class="p1">あいうえお　abcde</p>

 

破線 (dashed)

<style>
  .p1 {
    text-decoration: underline dashed red;
  }
</style>
<p class="p1">あいうえお　abcde</p>

 

波状の線 (wavy)

<style>
  .p1 {
    text-decoration: underline wavy red;
  }
</style>
<p class="p1">あいうえお　abcde</p>

関連の記事

CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 英文の単語の間隔を指定する

△上に戻る