<main>
  <div>
     <h1 class="demo-1"><span>Demo 1</span> – Underlines  with pseudo-elements</h1>
     <h1 class="demo-2"><span>Demo 2</span> – Underlines  with border-bottom</h1>
     <h1 class="demo-3"><span>Demo 3</span> – Underlines  with background-image</h1>
  </div>
</main>
/* Demo Underlines on the text */

/* DEMO 1 */
.demo-1 span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 6px;
  
  background: red;
}

/* DEMO 2 */
.demo-2 span {
  padding-bottom: 4px;
  
  border-bottom: solid 6px green;
}

/* DEMO 3 */
.demo-3 span {
  padding-bottom: 10px;
  
  background-image: linear-gradient(to bottom, orange 33%, transparent 33%);
  background-position: 0 1.35em;
  background-repeat: repeat-x;
  background-size: 2px;
}

/* Common style*/
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
html {
  box-sizing: inherit;
  font-size: 100%
}

body {
  padding: 40px;
  
  font-family: 'Fredoka One', cursive;
  font-size: 80%;
  
  background: Yellow;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
  height: 100vh;
  
  background: black;

  overflow: auto;
}

main div {
  padding: 40px;
  width: 80%;
  color: white;
  
  background: blue;
  
  resize: both;
  overflow: auto;
}

h1 {
  margin-bottom: 1.5em;
  line-height: 1.8;
}

h1:nth-child(1) {
  margin-top: 1em
}

h1 span {
  position: relative;
}
// Underlines on the text

// Author Joël Lesenne <https://joellesenne.dev>

External CSS

  1. https://codepen.io/joellesenne/pen/pdMPdW

External JavaScript

  1. https://codepen.io/joellesenne/pen/pdMPdW