<div class="card">
<a id="link" href="https://asyrafff.com/">Try adjust me with offset</a>
  <label>Offset: 
    <input type="range" min="-2" max="2" step="0.1" value="0" id="offset"></label>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
label {
  display: flex;
  align-items: center;
}
a {
  text-underline-offset: 0em;
  margin-bottom: 4em;
  font-size: 2rem;
}

const link = document.getElementById('link'), offset = document.getElementById('offset');

offset.addEventListener('input', function () {
  link.style.textUnderlineOffset = this.value + 'em';
}, false);