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

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

目次 text-decorationとは
線なし(none) / 取り消し線(line-through) / 下線(underline)
上線(overline) / 二重線(double) / 点線(dotted)
破線(dashed) / 波状の線(wavy)

text-decorationとは

書き方 text-decoration : 線の位置  線の種類  線の色
線の位置 none・・・線は引きません。
line-through・・・取り消し線を引きます。
underline・・・下線を引きます。
overline・・・上線を引きます。
線の種類 solid・・・一重の線
double・・・二重線
dotted・・・点線
dashed・・・破線
wavy・・・波状の線
線の色 色を指定します。
初期値 none,solid
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration

線なし (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 単語の間隔を指定する
[CSS] overflow-wrap/word-wrap 単語が表示域超過
CSS overflow はみ出し部分を表示する/しない

△上に戻る