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

CSSのtext-decorationのサンプルです。

text-decorationプロパティ

text-decoration : 値1 値2 値3

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

値3 : text-decoration-color (線の色)
値3	説明
色	色を指定します。
値を継承しない

decorationは、飾りという意味です。
以下はMDNのtext-decorationプロパティのリンクです。
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>