css 上划线 设置宽度

在CSS中，我们可以通过下划线来为文本添加装饰效果，但是如果想要设置下划线的宽度，就需要使用text-decoration-thickness属性了。

p {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

如上代码，我们在p标签中设置了text-decoration属性为underline，即为文本添加下划线效果。同时，我们又使用了text-decoration-thickness属性来设置下划线的宽度为2px。

需要注意的是，text-decoration-thickness目前只有在Chrome和Edge浏览器中得到支持，因此在其他浏览器中可能不会生效。

值得一提的是，除了设置下划线的宽度，text-decoration-thickness还可以用来设置其它装饰线条（如上划线、删除线）的宽度，具体可参考下面的代码：

p {
    text-decoration: overline;
    text-decoration-thickness: 3px;
}
span {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
    

在上述代码中，我们通过text-decoration属性来分别设置了上划线和删除线。然后，通过text-decoration-thickness属性，我们分别将它们的宽度设置为3px和1px。

最后，需要提醒大家的是，在设置装饰线条时，尽量不要过度装饰，以免影响页面的美观度和阅读体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！