css 改变下划线长度，伪元素模拟border-bottom

在CSS中，我们可以使用伪元素来模拟border-bottom，并通过调整伪元素的宽度来改变下划线的长度。以下是一个示例：

.underline-container {
  position: relative;
  display: inline-block; /* 或者 block 根据需求 */
}
 
.underline-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid black; /* 设置下划线的样式 */
  width: 100%; /* 默认长度为100% */
}
 
.custom-length::after {
  width: 50%; /* 示例：设置为父容器宽度的一半 */
}

HTML部分：

<div class="underline-container">默认长度下划线</div>
<div class="underline-container custom-length">自定义长度下划线</div>

在这个例子中，.underline-container 类定义了一个容器，该容器的文本下方会有一个模拟的下划线。.underline-container::after 伪元素用来创建下划线，并且可以通过调整.custom-length::after中的width属性来改变下划线的长度。