css下划线 长短

CSS提供了多种设置下划线的方式，其长度也可以根据需求进行调整。

 /* 给下划线设置长度 */
  .underline {
    text-decoration: underline;
    text-decoration-skip-ink: none; /* 避免Firefox下划线长度出现异常 */
    text-underline-offset: 0.2em; /* 下划线距离文字底部的偏移量 */
    text-decoration-thickness: 3px; /* 下划线的粗细 */
  } 

在上述代码中，text-underline-offset设置下划线距离文字底部的偏移量，可以用来调整下划线的长度。若想要让下划线更加粗细，则可以通过text-decoration-thickness属性进行设置。text-decoration-skip-ink用于防止Firefox浏览器下划线长度出现异常。

除了直接使用text-decoration属性来添加下划线外，还可以通过border-bottom属性实现下划线效果。此时，下划线的长度同样可以通过width属性进行设置。

 /* 通过border-bottom添加下划线 */
  .underline-2 {
    border-bottom: 1px solid black; /* 下划线的粗细以及颜色 */
    width: 90px; /* 下划线的长度 */
  } 

CSS提供了多种设置下划线的方式，我们可以根据需要进行选择和调整，从而获得最佳的下划线效果。