Question

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

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

底部边框不是下划线，有些字母甚至延伸到下划线下方。下划线比下面的一行更复杂。
我已经使用了相关元素的填充，如上所述。

我试图使用text-decoration: underline选择器来实际拥有边框底部。似乎css并没有给我很多替代品，比如text-decoration-underline-height或类似的东西。

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

看起来似乎不是：使用此css选择器创建伪标签之后。有些人设法做到了这一点，但我没有。所以没有什么可以创造出可恶的边界底部。

我该怎么办？将{{1}}样式下划线的正确方式添加到css中吗？

在此之前，如何使用所需厚度的行来强调文本？

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

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

Answer 3

我尝试使用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属性来使边框与文本保持距离。你不能把它拉得更近，我认为不应该是一个问题，因为你不希望它太接近开始。

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

3 个答案: