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

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

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

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

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

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

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

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

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