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

Question

我希望输出如下btw 目前我正在使用波纹管 CSS 来执行此操作

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

但它适用于整个文本，我想减少这条线的宽度

标签： javascriptcsssassuser-experience

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: "";
}