<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.