如何在CSS中更改文本下划线的线宽[重复]答案

【问题标题】：How to change text underline's line width in CSS [duplicate]如何在CSS中更改文本下划线的线宽[重复]
【发布时间】：2020-04-09 03:40:44
【问题描述】：

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

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

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

【问题讨论】：

你需要pseudo elements。
一篇很棒的文章css-tricks.com/styling-underlines-web

标签： javascript css sass user-experience

【解决方案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: "";
}

【讨论】：

【解决方案2】：

pseudo-elements 可以，像这样：

span {
  position: relative;
  font-weight: bold;
  font-size: 20px;
}

span::after {
  display: block;
  content: '';
  width: 40px;
  height: 2px;
  background-color: red;
}

&lt;span&gt;Search Options&lt;/span&gt;

【讨论】：

【解决方案3】：

您已经选择了整个项目，需要使用像 span 这样的元素来隔离 HTML 的“搜索”部分

&lt;h1&gt; &lt;span class="text-underline"&gt; Search &lt;/span&gt; Options &lt;/h1&gt;

试试看

【讨论】：