javascript - 如何在CSS中更改文本下划线的线宽

Question

这个问题已经有答案了:

How to change the length/position of text-decoration:underline? (4 个回答)

Any way to declare a size/partial border to a box? (6 个回答)

已关闭 3 年前。

我想要输出如下顺便说一句，目前我正在使用下面的 CSS 来执行此操作

.text-underline {
    border-bottom: 4px solid #f8f8f8;
    padding: 0 0 2px;
  }

但它适用于整个文本，我想减少该行的宽度

Answer 1

使用伪元素非常简单:

.text-underline:after {
  display: block;
  height: 0;
  width: 5%; /* any width of your choice with any units e.g. px, em... */
  border-bottom: 4px solid #ff0000;
  content: "";
}