css中如何给文字加线

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,通过text-decoration属性可以给文字添加不同的装饰线,比如下划线、删除线等。/* 给文字添加下划线 */ text-decoration: 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; /* 移动鼠标时取消下划线 */
} 

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何给文字加线

粉丝

0

关注

0

收藏

0

已有0次打赏