This is a <span>Gradient Underline</span>.
span {
  /* MAGIC */
  background-image: linear-gradient(transparent 64px, #F243B3 50%, #FFCA47 100%);

  font-size: 64px;

/* End of demo. Utility code below. */

body {
  text-align: center;
  color: white;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
  padding: 0;
  The magic here is that the font-size 
  matches the transparent offset of the
  linear gradient, pushing the color
  below the text.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.