编辑CSS 'underline‘属性的线宽

Question

因为您可以为CSS中的任何文本添加下划线，如下所示：

h4 {
  text-decoration: underline;
}

那么如何编辑所绘制的“线”，线上的颜色很容易指定为color: red，但是如何编辑线的高度，即粗细呢？

Answer 1

以下是实现这一点的一种方法：

HTML：

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

​CSS：

u {
  text-decoration: none;
  border-bottom: 10px solid black;
}​

下面是一个示例：http://jsfiddle.net/AQ9rL/

Answer 2

最近我不得不处理FF，它的下划线太粗，离FF中的文本太远，我找到了一种更好的方法来处理它，使用了一对方框阴影：

.custom-underline{
  box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

第一个阴影被放在第二个阴影的上面，这就是你如何通过改变两者的'px‘值来控制第二个阴影的。

另外:各种颜色，粗细和下划线位置

缺点:不能在非实心背景上使用

这里我举了几个例子：http://jsfiddle.net/xsL6rktx/

Answer 3

还有text-decoration-thickness，目前是CSS Text Decoration Module Level 4的一部分。它正处于“编辑草案”阶段--所以它是一个正在进行中的的工作，可能会发生变化。截至2020年1月，it is only supported in Firefox and Safari。

文本装饰厚度CSS属性设置元素中文本上使用的装饰线的粗细或宽度，如划线、下划线或上划线。

a {
  text-decoration-thickness: 2px;
}

Codepen：https://codepen.io/mrotaru/pen/yLyLOgr (仅限火狐)

还有CSS Text Decoration Module Level 3的一部分text-decoration-color。这是更成熟的(候选推荐)，并且在大多数主流浏览器中都受支持( Edge和IE除外)。当然，它不能用来改变线条的粗细，但可以用来实现更“静音”的下划线(也可以在代码中显示)。