Link Hover Underline Gradient

Apply a gradient to the underline of your links when hovered.

See the Pen Link Hover Underline Gradient by Brandon Himpfen (@brandonhimpfen) on CodePen.

HTML

<a href="#">Pellentesque habitant morbi</a> 

CSS

a {
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}
a:hover::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #444;
  background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
 }
Show Comments

Get the latest posts delivered right to your inbox.