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

Question

我经常为按钮使用 a-tags，所以它们有一个填充，使它们看起来像按钮。

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

• 底部边框不是下划线，有些字母甚至延伸到下划线之下。下划线比某物下面的线要复杂得多。
• 我已经按照说明使用了相关元素的填充。

我已经尝试使用a:hover:after 选择器来实际拥有一个边框底部。似乎 css 并没有给我很多选择，比如 text-decoration-underline-height 或类似的东西。

然后，我将通过某种方式更改该伪元素的高度以模拟下划线，而文本与“下划线”之间的距离却没有一厘米。

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

我该如何进行？是否会在 css 中添加正确的样式 text-decoration: underline 样式下划线？

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

Answer 1

您可以使用:after pseudo selector 执行此操作。您引用的不想伪造下划线的原因之一是您希望下划线延伸到下划线下方。好吧，您可以在伪造的下划线上使用负边距来完成此操作（注意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>

Answer 2

我尝试使用 APAD1 的方法创建下划线，但我花了至少 20 分钟的时间思考我的做法有问题。我无法让它在 FireFox 上运行，所以我想出了这个方法，它对那些可能遇到问题的人来说就像一个魅力。

    a{
    	display:inline-block;
    	color:red;
    	text-decoration:none;
    	border-bottom:4px solid blue;
    }
    a:hover{
    	color:blue;
    	text-decoration:none;
    	border-bottom:4px solid red;
    }

<a href="#">Sample underline</a>

您还可以使用 padding-bottom 属性来使边框与文本保持距离。但是你不能把它拉得更近，我认为这应该不是问题，因为你不希望它一开始就太靠近。

Answer 3

您可以考虑使用box-shadow，如下所示：

a
{
  box-shadow: 0 5px 0 rgba(0,0,100, 0.5);
  text-decoration: none;
  padding-bottom: 5px;
}

<a href="#">My super link</a>

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

见定义：https://developer.mozilla.org/en/docs/Web/CSS/box-shadow

此解决方案的缺点是轮廓不可点击。

要克服这个问题，您可以这样做：

a
{
  box-shadow: 0 -5px  rgba(0,0,100, 0.5) inset;
  text-decoration: none;
  padding-bottom: 10px;
}

<a href="#">Totally clickable</a>