css下划线怎么设置长度

CSS下划线是网页设计中常用的元素，用于强调重点内容或作为链接的标志。但是，你知道如何设置下划线的长度吗？下面我们来分享一下。

 /* 基础样式 */
  .underline {
    text-decoration: underline;
  } 

要设置下划线的长度，我们可以借助CSS3中的两个属性：text-decoration-line和text-decoration-thickness。

 /* 设置下划线长度为文字100% */
  .underline {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-line: underline;
  } 

上面的代码设置了下划线的长度为文字的100%，即下划线的长度与文字的长度相等。如果想设置下划线的长度为文字的一半，可以将text-decoration-thickness的值设置为0.5em，如下所示：

 /* 设置下划线长度为文字的一半 */
  .underline {
    text-decoration: underline;
    text-decoration-thickness: 0.5em;
    text-decoration-line: underline;
  } 

通过上述设置，可以根据实际需要来调整下划线的长度，使网页视觉效果更为丰富和有趣。