如何在不使用边框的情况下更改a-tag的下划线厚度？

我经常使用a-tags作为按钮,因此它们有一个填充,使它们像按钮一样.

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

底部边框不是下划线,有些字母甚至延伸到下划线下方.下划线比下面的一行更复杂.

我已经使用了所讨论的元素的填充.

我试图使用一个a:hover:after选择器实际上有一个border-bottom.似乎css并没有给我很多替代品,比如text-decoration-underline-height或类似的东西.

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

它似乎不是:使用此css选择器创建伪标签之后.有些人设法做到了这一点,但我没有.因此没有什么可以创造出可恨的边界底部.

我该怎么办？将一种正确的样式text-decoration: underline风格下划线添加到css中吗？

在那之前,如何使用所需厚度的线条为文本加下划线？

您可以使用:after伪选择器执行此操作.你引用的不想伪造下划线的原因之一是你希望下行器延伸到下划线以下.好吧,你可以在伪造的下划线上使用负边距来实现这一点(注意下划线如何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;
  }

Sample link with descender