<a class="fancy" href="#">Our fancy link</a><br>
<a class="buggy" href="#">Buggy, but almost good</a><br>
<a class="just-border" href="#">Just a border</a><br>
<a class="old-school" href="#">Old school regular</a><br>

<div class="row">
  <p class="column">Cat ipsum dolor sit amet, annoy the old grumpy cat. <a class="fancy" href="#">Notice how well it works with multi-line links! Chew the plant run in circles. Cats go for world domination.</a> I like frogs and 0 gravity yet eat half my food and ask for more.</p>
   <p class="column">Just <a class="buggy" href="#">in case you are wondering, this is Cat Ipsum. Does the underline appear buggy?</a> Have my breakfast spaghetti yarn step on your keyboard while you're gaming and then turn in a circle. Destroy house in 5 seconds.
  </p>
</div>
a.fancy, a.fancy:visited {
    text-decoration: none;
    background-image:
      linear-gradient(
          transparent 2px,
          #2ed392 2px,
          #2ed392 4px,
          transparent 4px
      ),
      linear-gradient(
          transparent 2px,
          #d8dce9 2px,
          #d8dce9 4px,
          transparent 4px
      );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
    padding-bottom: 4px;
    border-bottom: 6px solid transparent;
}
a.fancy:hover {
    background-size: 100% 6px;
}
@supports (-ms-ime-align:auto) {
    a.fancy, a.fancy:visited {
        background-image:
            linear-gradient(#2ed392, #2ed392),
            linear-gradient(#d8dce9, #d8dce9);
        background-size: 0% 2px, 100% 2px;
        padding-bottom: 2px;
    }
    a.fancy:hover {
        background-size: 100% 2px;
    }
}

/* Only border as underline, animated*/
a.just-border, a.just-border:visited {
    text-decoration: none;
    border-bottom: 2px solid #d8dce9;
    transition: border-color 0.3s;
}
a.just-border:hover {
    border-bottom: 2px solid #2ed392;
}

/* Regular normal old school link */
a.old-school, a.old-school:visited {
    text-decoration: none;
}
a.old-school:hover {
    text-decoration: underline;
}

/* Buggy approach*/
a.buggy, a.buggy:visited {
    text-decoration: none;
    position: relative;
    border-bottom: 2px solid #d8dce9;
}
a.buggy:before {
    content: "";
    height: 100%;
    position: absolute;
    border-bottom: 2px solid #2ed392;
    margin-top: 2px;
    left: 0;
    right: 100%;
    transition: all 0.3s;
}
a.buggy:hover:before {
    right: 0;
}

/* Cosmetics of the example only */
a:not(.old-school) {
    color: #2d305f;
}
a, p {
    font-size: 21px;
    line-height: 1.4;
}
p {
    color: #333346;
    max-width: 300px;
}

.row {
    display: flex;
}
.column {
    flex: 50%;
    margin-right: 10px;
    margin-bottom: 0;
}
@media only screen and (max-width: 640px) {
    .row {
      display: block;
    }
}
body{
  margin: 20px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.