如何在不使用边框的情况下更改 a 标签的下划线粗细？

我经常对按钮使用 a 标签，因此它们有一个填充，使它们像按钮一样。

如何更改文本装饰下划线的粗细？人们经常建议为此使用边框底部，但是

• 底部边框不是下划线，有些字母甚至延伸到下划线以下。下划线比某物下面的线复杂得多。
• 正如所解释的，我已经使用了相关元素的填充。

我尝试过使用a:hover:after无论如何，选择器实际上有一个边框底部。看起来 css 并没有给我很多选择，比如 text-decoration-underline-height 或类似的东西。

然后，我将以某种方式改变该伪元素的高度以模拟下划线，而文本到“下划线”之间的距离不会有一厘米。

:after 伪标签似乎不是使用此 css 选择器创建的。有些人已经成功做到了这一点，但我没有。所以没有什么可以创造可恨的底部边界。

我该如何继续？正确的造型方法text-decoration: underline样式下划线可以添加到CSS中吗？

在那之前，如何使用所需粗细的线为文本添加下划线？

您可以使用: 在伪选择器之后 http://www.w3schools.com/cssref/sel_after.asp。您引用的不想伪造下划线的原因之一是您希望下降部分延伸到下划线以下。好吧，你可以在伪造的下划线上使用负边距来实现这一点（注意下划线的下降部分是如何实现的）p与下划线重叠）：

a {
  display:inline-block;
  text-decoration:none;
  color:red;
}
  a:hover {
    color:blue;
  }
    a:hover:after {
      background:red;
    }
  a:after {
    display:block;
    content:'';
    width:100%;
    height:4px;
    background:blue;
    margin-top:-2px;
  }

<a href="#">Sample link with descender</a>