css下划线控制长度

在CSS中，我们可以利用text-decoration属性来为文字添加下划线。下划线可以为文字增加强调效果，同时也可以帮助我们更好地展示页面内容。

当我们为文字使用下划线时，默认情况下下划线的长度和文字长度保持一致。但有时候我们需要控制下划线的长度，这时可以通过使用伪元素来实现。具体操作如下：

/*利用伪元素添加下划线*/
.underline{
  position:relative;  //设置元素为相对定位
}

.underline::after{
  content:"";  //添加伪元素
  position:absolute;  //设置伪元素为绝对定位
  left:0;  //设置伪元素的位置
  bottom:-2px;  //设置伪元素的位置
  height:2px;  //设置下划线高度
  background-color:#000;  //设置下划线颜色
  width:60%;  //设置下划线长度
} 

在上面的代码中，我们首先将需要添加下划线的元素设置为相对定位，这是为了让伪元素能够根据该元素的位置进行定位。接着，我们使用::after伪元素来添加下划线，设置position属性为absolute来让它脱离文档流，设置left和bottom属性来控制下划线的位置。下划线高度、颜色和长度的设置同样可以根据需求进行调整。

此外，我们还可以通过::before伪元素来为文字添加上划线或者删除线。同样地，我们可以通过控制该伪元素的属性来进行样式的调整。

总之，利用CSS伪元素来控制下划线长度是一种非常有用的技巧，能够帮助我们更好地展示页面内容，为用户提供更好的阅读体验。