如何在css中改变下划线的宽度

Question

我在这样的表中有一个单元格:

<td><b>Grand Total</b></td>

我需要在"Grand Total"文本下面加上一行.我用过text-decoration: underline;.它工作得很好,但我需要改变下划线的颜色和厚度.我曾经text-decoration-color: red;添加颜色,但它不起作用.我怎么解决这个问题？

Answer 1

使用这样的border-bottom 定义颜色

b {
    border-bottom: 1px solid red;
    padding: 0 0 4px;
}

<td><b>Grand Total</b></td>

Answer 2

最好的方法是使用text-decoration-thicknesscss 属性。这是文档的链接。一个简单的代码示例如下所示：

text-decoration: underline solid black 2px;

这里2px是text-decoration-thickness下划线的宽度。

Answer 3

您不能修改underline标签的宽度。而是去寻找Border-bottom方法并根据需要更改它的属性。

.underline {
  border-bottom: 5px solid red;
}

<table>
  <tr>
    <td><b class="underline">Grand Total</b></td>
  </tr>
</table>