CSS text-decoration 文字に線を引くサンプル

text-decorationプロパティ

text-decoration : 値1  値2  値3

text-decorationプロパティは、文字に引く線を指定します。
引数は3つあり、線の位置、線の種類、線の色を指定します。

値1 : text-decoration-line (線の位置)
値1 説明
none 線は引きません。(初期値)
line-through 取り消し線を引きます。
underline 下線を引きます。
overline 上線を引きます。
値2 : text-decoration-style (線の種類)
値2 説明
solid 一重の線 (初期値)
double 二重線
dotted 点線
dashed 破線
wavy 波状の線
値3 : text-decoration-color (線の色)
値3 説明
色を指定します。
値を継承しない

文字に引く線を指定するサンプルです。

線なし (none)

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

 

取り消し線 (line-through)

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

 

下線 (underline)

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

 

上線 (overline)

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

 

二重線 (double)

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

 

点線 (dotted)

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

 

破線 (dashed)

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

 

波状の線 (wavy)

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

関連の記事

CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 単語の間隔を指定する
CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow はみ出た部分を表示する/しない

△上に戻る