<div class="container">
  <div class="row row--stars">
    <p class="cell">
      <span class="underline underline--stars">Starderline</span>
    </p>
  </div>

  <div class="row row--emoji">
    <p class="cell">
      <span class="underline underline--emoji">Emojerline</span>
    </p>
  </div>

  <div class="row row--bacon">
    <p class="cell">
      <span class="underline underline--bacon">Baconderline</span>
    </p>
  </div>
</div>
a {
  color: #000;
  text-decoration: none;
}

.underline {
  background-repeat: repeat-x;
}

.underline--stars {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/star.svg");
  background-position: 0 1.06em;
  background-size: 10px 9px;
  color: #f2f3f8;
}

.underline--emoji {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/heart.png");
  background-position: 0 1.06em;
  background-size: 15px 9px;
  color: #e8665f;
}

.underline--bacon {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
  background-position: 0 1.06em;
  background-size: 28px 9px;
  color: #9e4446;
}

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

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

p {
  margin: 0;
}

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

.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
  
  > * {
    display: flex;
    flex-basis: percentage(1 / 3);
    align-items: center;
    align-content: center;
  }
}

.row {
  padding: 40px;
}

.row--bacon {
  background-color: #feeee5;
}

.row--emoji {
  background-color: #9c2b38;
}

.row--stars {
  background-color: #0d0921;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.