text-underline-offset下划线偏移实例页面

回到相关文章 »

效果：

0em

下划线位置是？zhangxinxu.com

代码：

CSS代码：
input {
    width: 280px;
}
span {
    text-decoration: underline;
    font-size: 200%;
}
HTML代码：
<input id="range" type="range" min="-2" max="2" step="0.1" value="0">
<output>0em</output>

<p><span id="target">下划线位置是？zhangxinxu.com</span></p>
JS代码：
range.addEventListener('input', function () {
    this.nextElementSibling.textContent = this.value + 'em';
    target.style.textUnderlineOffset = this.value + 'em';
});