<div>
  <section>
    <h2>Underline</h2>
    <ul class="underline">
      <li>
        <span class="wavy">wavy</span>
      </li>
        <li>
        <span class="dotted">dotted</span>
      </li>
        <li>
        <span class="dashed">dashed</span>
      </li>
    </ul>
  </section>
  <section class="overline">
    <h2>Overline</h2>
    <ul>
      <li>
        <span class="wavy">wavy</span>
      </li>
      <li>
        <span class="dotted">dotted</span>
      </li>
      <li>
        <span class="dashed">dashed</span>
      </li>
    </ul>
  </section>
    <section class="combination">
    <h2>Combination</h2>
    <ul>
      <li>
        <span class="wavy">wavy</span>
      </li>
      <li>
        <span class="dotted">dotted</span>
      </li>
      <li>
        <span class="dashed">dashed</span>
      </li>
    </ul>
  </section>
</div>

body {
  background-image: linear-gradient(320deg, antiquewhite 0%, cornsilk 70%);
  font-family: sans-serif;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: royalblue;
}

h2 {
  color: DarkSlateBlue;
}

div {
  display: flex;
  width: 100vw;
  justify-content: space-around;
  margin: 0 auto;
}

li {
  margin-top: 2rem;
}

.overline span {
  --line-position: overline;
}

.underline span {
  --line-position: underline;
}

.combination span {
  --line-position: underline overline;
}

.wavy { text-decoration: var(--line-position) wavy deeppink }
.dotted { text-decoration: var(--line-position) dotted deeppink }
.dashed { text-decoration: var(--line-position) dashed deeppink }