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

我在表格中有一个单元格，如下所示：

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

总计

---

我需要在文本“总计”下给它一行。我用了

文字装饰：下划线。它工作得很好，但我需要改变下划线的颜色和厚度。我用了
文字装饰颜色：红色添加颜色，但不起作用。如何解决此问题？
使用
边框底部
这样定义颜色


b{
边框底部：1px纯红；
填充：0 0 4px；
}
总计
您不能修改
下划线
标记的宽度。相反，使用
边框底部
方法，并根据需要更改其属性


。下划线{
边框底部：5px纯红；
}

总计
您应该为您的特定行指定类或id，例如：

HTML:

使用伪元素，如
：before
和
：after
来控制下划线的长度


td{
位置：相对位置；
}
运输署：在{
内容：''；
位置：绝对位置；
宽度：100%；
显示：块；
高度：5px；
背景色：红色；
底部：-5px；
}

总计
来自


td{
颜色：红色；
文字装饰：下划线；
}
跨度{
颜色：黑色；
文字装饰：无；
}

总计

要控制宽度，您只需将宽度从100%更改为您想要的任何值。
如果您以“b”为目标，您可以使用背景渐变来调整线条的厚度和垂直位置

例如

您可以使用border bottom属性设置下划线的宽度和颜色。它不在整个文本下划线。要求控制下划线的宽度。只需将宽度设为100%，它将在整个文本下划线。哦，我想OP指的是厚度。也许你是对的。我怎样才能指定下划线的宽度呢？谢谢你的建议answer@Jibin不太清楚，谢谢你的支持@Carl Jan
<td><b id="total">Grand Total</b></td>

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

td {
position: relative;
}

td::after {
content: '';
position: absolute;
width: 30%;
display: block;
height: 5px;
background-color: red;
bottom: -5px;
}

b {
    background-image: linear-gradient(to bottom, #fdb514 50%, transparent 50%);
    background-position: 0px 0.9em;
    background-repeat: repeat-x;
    background-size: 1px 15px;
    display: inline;
}