<script src="https://use.typekit.net/hxq8vgr.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

<div class="contain">
  <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Sed ut pellentesque odio. Morbi luctus <a href="#">quam et libero luctus</a> malesuada vitae nec sapien. Duis ultrices turpis dui, varius condimentum <a href="#">neque luctus in</a>. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris dapibus mi et odio mattis gravida. Curabitur in <a href="#">vestibulum velit</a>. Quisque maximus arcu eu commodo imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>

body {
  font-family: "open-sans",sans-serif;
  padding: 2em;
  background: linear-gradient(150deg, #271f2a 0%, #271f2a 49.9%, #1e1821 50%, #271f2a 50.1%, #271f2a 100%);
}

.contain {
  max-width: 40em;
  margin: 0 auto;
}

h1 {
  position: relative;
  color: white;
  font-size: 2.25em;
  font-weight: 800;
  padding-bottom: 1.25em;
  margin-bottom: 1.25em;
  
  &::after {
    content: "";
    width: 1000%;
    position: absolute;
    bottom: 0;
    right: 50%;
    border-bottom: 1px solid #7b6097;
  }
}

p {
  color: white;
  font-weight: 300;
  line-height: 2em;
  
  a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .3s ease;

    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      left: 0;
      bottom: .125em;
      height: 1px;
      background: linear-gradient(90deg, #ff7800 0%, #ff0000 50%, #ff00fe 100%);
      transition: bottom .3s ease;
    }

    &:hover {
      color: rgba(white, .8);

      &::after {
        bottom: 0;
      }
    }
  }
}