<div class="card">
<a id="link" href="https://asyrafff.com/">Adjust my Thickness</a>
  <label>Thickness: 
    <input type="range" min="0" max="5" step="0.1" value="0" id="thickness"></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-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: blue;
  text-decoration-thickness: 0;
  margin-bottom: 4em;
  font-size: 3rem;
}
const link = document.getElementById('link'), thickness = document.getElementById('thickness');

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.