编辑 CSS“下划线”属性的线宽

Question

因为你可以像这样在 CSS 中的任何文本下划线：

 h4 {
  text-decoration: underline;
}

您还如何编辑绘制的“线”，在线上获得的颜色很容易指定为 color: red 但是如何编辑线的高度，即粗细？

原文由 user818700 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 Pranav 웃 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

第一个阴影放在第二个阴影之上，这就是您可以通过改变两者的“px”值来控制第二个阴影的方式。

加上：各种颜色、粗细和下划线位置

减号：不能在非纯色背景上使用

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

原文由 anvar 发布，翻译遵循 CC BY-SA 4.0 许可协议