javascript - 在 JavaScript 中设置下划线(文本修饰)的粗细

Question

我试图找出如何在 JavaScript 中设置下划线的粗细(当光标悬停时发生的文本装饰)。目前文本带有下划线，如下所示:

x.style.textDecoration = "underline";

以及“onmouseout”，这将按如下方式撤消:

x.style.textDecoration = "none";

到目前为止，我在网上看到的所有建议都与格式化标签的底部边框有关。我不是尝试格式化菜单栏或任何其他元素，而是尝试格式化普通的超链接。我在各种浏览器中尝试过，默认下划线在 Firefox 中看起来不错，但在 Chrome 中，该线非常细，与它下划线的粗体文本形成鲜明对比。

非常感谢任何有关如何解决此问题的建议。

Answer 1

CSS :hover应该用于此类任务

.x{
    /* default styles here */
}

.x:hover {
    /* HOVER default styles here */
}

如果您希望能够控制“下划线”的粗细
使用border-bottom相反或box-shadow inset 。

整个填充 anchor 的边框

.x{
  display:         inline-block;
  color:           magenta;
  background:      #ddd;
  padding:         15px 15px 10px;
  text-decoration: none;
  border-bottom:   5px solid transparent;
  transition:      border-bottom 0.3s;
}

.x:hover{
  border-bottom-color: magenta;
}

<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>

仅使用内部 <span> 在 anchor 文本上和inset box-shadow

.x{
  display:         inline-block;
  color:           magenta;
  background:      #ddd;
  padding:         15px 15px 10px;
  text-decoration: none;
}

.x span{
  transition:      0.3s;
  box-shadow: inset 0 -2px 0 0 trasparent;
}

.x:hover span{
  box-shadow: inset 0 -2px 0 0 magenta;
}

<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>

使用 :after伪用于更多控制

.x{
  position:        relative;
  color:           magenta;
  text-decoration: none;
}

.x:hover:after{
  content:    "";
  position:   absolute;
  left:       0;
  bottom:     -3px;      /* Control bottom position */
  width:      100%;
  height:     5px;       /* Set your desired thickness */
  background: magenta;
}

<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>