<p class="fade"><a>テキストリンク</a>にふわっと下線</p>

<p class="right_in"><a>テキストリンク</a>に横から下線</p>

<p class="right_out"><a>テキストリンク</a>の下線が消える</p>

<p class="left_width"><a>テキストリンク</a>の下線が左から延びる</p>

<p class="center_width"><a>テキストリンク</a>の下線が中央から延びる</p>
a{
  color:blue;
  text-decoration: none;
  text-underline-offset: 5px;
  cursor: pointer;
}

/* fade */
.fade a{
  position: relative;
}
.fade a:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -5px;
  left: 0;
  background: blue;
  opacity: 0;
  transition: opacity 0.5s;
}
.fade a:hover:before{
  opacity:1;
}

/* right_in */
.right_in a{
  position: relative;
}
.right_in a:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -5px;
  right: -100%;
  background: blue;
  opacity: 0;
  transition: 0.5s;
}
.right_in a:hover:before{
  right: 0;
  opacity: 1;
}

/* right_out */
.right_out a{
  position: relative;
}
.right_out a:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -5px;
  right: 0;
  background: blue;
  opacity: 1;
  transition: 0.5s;
}
.right_out a:hover:before{
  right: -100%;
  opacity: 0;
}

/* left_width */
.left_width a{
  position: relative;
}
.left_width a:before {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  bottom: -5px;
  left: 0;
  background: blue;
  opacity: 1;
  transition: width 0.5s;
}
.left_width a:hover:before{
  width: 100%;
}

/* center_width */
.center_width a{
  position: relative;
}
.center_width a:before {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: blue;
  opacity: 1;
  transition: width 0.5s;
}
.center_width a:hover:before{
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.