[分享]css中如何给文字加线

在CSS中，通过textdecoration属性可以给文字添加不同的装饰线，比如下划线、删除线等。/ 给文字添加下划线 / textdecoration: underline; / 给文字添加中划线（...

在CSS中，通过text-decoration属性可以给文字添加不同的装饰线，比如下划线、删除线等。

/* 给文字添加下划线 */
text-decoration: underline;

/* 给文字添加中划线（删除线）*/
text-decoration: line-through;

/* 给文字添加上划线 */
text-decoration: overline;

/* 同时添加上中下划线 */
text-decoration: underline line-through overline; 

如果想要修改线的样式，可以通过text-decoration-style属性来设置，常见的值有solid、dashed、dotted等。

/* 添加虚线 */
text-decoration: underline;
text-decoration-style: dashed;

/* 添加点线 */
text-decoration: overline;
text-decoration-style: dotted; 

还可以通过text-decoration-color属性来为装饰线添加颜色。

/* 给文字添加红色下划线 */
text-decoration: underline;
text-decoration-color: red; 

另外，如果只是想为一部分文字添加装饰线，可以使用span标签或伪类选择器来实现。

/* 使用span标签为文字添加下划线 */
<p>这里有一段<span style="text-decoration: underline;">需要下划线的文字</span>。</p>

/* 使用伪类选择器为超链接添加下划线 */
a:link {
  text-decoration: underline;
}
a:hover {
  text-decoration: none; /* 移动鼠标时取消下划线 */
}