<p>
  愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。
  <a class="fancy-link" href="#">
    若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。
  </a>
</p>
.fancy-link {
  text-decoration: none;
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 2px;
  transition: background-size 500ms ease-in-out;
}

.fancy-link:hover {
  background-size: 100% 2px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.