在 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.

整个填充锚的边框

.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> 和 inset box-shadow 在 Anchor 的文本上

.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>

Answer 2

尝试使用css:after伪元素，:hover，font-family设置为block；调整font-size改变线条粗细，调整top改变元素文本对应的线条位置

div {
  width:24px;
}

div:after {
  position:absolute;
  top:-24px;
  content:"_";
  width:0px;
  color:#000;
  display:none;
  font-weight:bold;
  font-family:block;
  font-size:48px;
}

div:hover:after  {
   cursor:pointer;
   display:block;
}

<div>abc</div>

Answer 3

如果要使用 JavaScript 来更新border-bottom 样式属性，可以使用：

someTag.style.borderBottom="3px solid blue";

注意 CSS border-bottom 在 JavaScript 中是 borderBottom