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

前端之家收集整理的这篇文章主要介绍了css – 如何在不使用边框的情况下更改a-tag的下划线粗细?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我经常使用a-tags作为按钮,因此它们有一个填充,使它们像按钮一样.

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

>底部边框不是下划线,有些字母甚至延伸到下划线下方.下划线比下面的一行更复杂.
>我已经使用了所讨论的元素的填充.

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

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

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

我该怎么办?是否有一种正确的文本装饰样式:下划线样式下划线会添加到CSS?

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

解决方法

您可以使用 :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>

猜你在找的CSS相关文章