<p class="solid"><a>テキストリンク</a>に直線を引く</p>

<p class="double"><a>テキストリンク</a>に二重線を引く</p>

<p class="dotted"><a>テキストリンク</a>に点線を引く</p>

<p class="dashed"><a>テキストリンク</a>に破線を引く</p>

<p class="wavy"><a>テキストリンク</a>に波線を引く</p>
a{
  color:blue;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

/* 直線 */
.solid a{
  text-decoration-style: solid;
}
/* 二重線 */
.double a{
  text-decoration-style: double;
}
/* 点線 */
.dotted a{
  text-decoration-style: dotted;
}
/* 破線 */
.dashed a{
  text-decoration-style: dashed;
}
/* 波線 */
.wavy a{
  text-decoration-style: wavy;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.