<p>
  <span class="text-shadow underline">Single underline</span>
</p>

<p>
  <span class="text-shadow underline underline--blue">My underline even wraps. It’s super impressive. You’re impressed, right?</span>
</p>

<p>
  <span class="text-shadow underline underline--double">Double underline</span>
</p>
.text-shadow {
  text-shadow:
    -2px -2px white,
    -2px 2px white,
    2px -2px white,
    2px 2px white;
}

.underline {
  background-size: 1px 1em;
  box-shadow:
    inset 0 -0.175em white,
    inset 0 -0.2em #000;
  display: inline;
}

.underline--blue {
    box-shadow:
    inset 0 -0.175em white,
    inset 0 -0.2em blue;
}

.underline--double {
  box-shadow:
    inset 0 -0.075em white,
    inset 0 -0.1em red,
    inset 0 -0.15em white,
    inset 0 -0.175em red;
}

// ----- Unrelated ----- //

html {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 48px;
  line-height: 1;
  padding: 20px;
}

body {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

p {
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: 0;
  
  &:last-child {
    margin-bottom: 0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.