<section>
  <div class="demo parent-em">
    <h1>using offset</h1>
    <h1>using em</h1>
  </div>
  <div class="demo parent-percentage">
    <h1>using offset</h1>
    <h1>percentage</h1>
  </div>
</section>

.parent-em {
  text-decoration-thickness: 0.1em;
}

.parent-percentage {
  text-decoration-thickness: 20%;
}

h1:first-child {
  text-decoration-line: underline;
  text-decoration-thickness: inherit;
  font-size: 16px; 
}

h1:last-child {
  text-decoration-line: underline;
  text-decoration-thickness: inherit;  
  font-size: 50px;
}














section {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

.demo {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.parent-em {
  background-color: #FA5900;
}

.parent-percentage {
  background-color: #0C5BB6;
}

h1 {
  color: #fff;
  font-family: cursive;
  text-align: center;  
  text-underline-offset: 20px;
}

@supports not (text-decoration-thickness: 1px) {
  section::before {    
    content: "Your browser doesn't support text-decoration-thickness";
    display: block;
    color: #e43;
    font-weight: bold;
    background-color: #fff;
    padding: 1em;
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    text-align: center;
  }
}