css文字删除线怎么用-前端问答-PHP中文网

css文字删除线是一种常见的文本样式效果，可以给文本添加一条横线用于表示该文字已经被删除或者是注释，同时也可用于强调文本的变化。

在网页设计中，CSS文字删除线的应用非常广泛，一些博客文章中使用删除线表示作者修改或者删除了原本的文本内容。当然，CSS文字删除线也可用于显示价格特价活动或者做一些特别强调的文本。

具体来说，CSS文字删除线用到的属性是text-decoration，其值为line-through，如下所示：

text-decoration: line-through;

此外，在实际应用中，我们还可以利用CSS伪类选择器来实现更加灵活的文字删除线。

例如，我们可以给ID为demo的文本添加一个鼠标悬浮时的删除线效果，如下所示：

立即学习“前端免费学习笔记（深入）”；

绿叶网络书店第二版

1、支持在线留言，后台可以管理留言（查看、删除）2、支持多用户分级管理，设站长、副站长和版主三个权限，站长的权限最大3、支持图书展示模块，可以在后台管理图书的图片、文字资料、价格等，并可以指定“新书推荐”4、支持图书多级分类，站长有权限管理分类5、支持图书在线订单，管理员可以在后台管理各种订单（已发货、未发货的等）6、支持顾客网上评分，对商店的服务质量进行评

下载

#demo:hover {
    text-decoration: line-through;
}

以上代码表示给ID为demo的文本添加鼠标悬浮时的删除线效果，即当鼠标移到该文本上方时，文本会出现删除线。

如果我们想要添加一个特殊的删除线样式，可以使用CSS伪元素:before或:after来实现，如下所示：

#demo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-color: #000;
}

以上代码表示在ID为demo的文本前面添加一个删除线样式，删除线的颜色为黑色，宽度占据整个文本宽度，高度1像素，位置在文本的中央位置。

需要注意的是，在使用CSS文字删除线的时候，我们还要注意兼容性问题。因为不同浏览器对text-decoration的解析可能会有所差异，所以写作时要避免使用浏览器专属的样式修改方式，建议使用通用属性。