如何使用CSS添加删除线？

添加删除线可以帮助我们在网页中更清晰地展示信息，例如价格打折信息、已删除的文本等等。下面我们来介绍如何使用CSS实现删除线效果。

使用text-decoration属性

最常用的方法是使用CSS的text-decoration属性，将其设置为line-through即可添加删除线。

<style>
            .del {
                text-decoration: line-through;
            }
        </style>

        <p>原价：<span class="del">100元</span></p>

上述代码中，我们首先定义了一个.del的class，将其text-decoration属性设置为line-through，然后在需要添加删除线的文本外层使用<span>标签，并添加.del类名即可。

使用伪类选择器

除了text-decoration属性，我们还可以使用CSS的伪类选择器:before或:after来添加删除线。

<style>
            .del:before {
                content: "";
                display: block;
                height: 1px;
                width: 100%;
                background-color: black;
                position: relative;
                top: 0.5em;
            }
        </style>

        <p>原价：<span class="del">100元</span></p>

上述代码中，我们首先定义了一个.del:before的伪类选择器，将其content属性设置为空，display属性设置为block，height属性设置为1px，wIDth属性设置为100%，background-color属性设置为黑色，position属性设置为relative，top属性设置为0.5em，即在文本底部留出0.5em的空隙，实现删除线的效果。

常见问题

1. 删除线的样式可以自定义吗？

   可以，可以通过text-decoration-style属性或border-bottom属性来自定义删除线的样式。

2. 在不同浏览器中，删除线的效果会有差异吗？

   会有差异，不同浏览器对text-decoration属性的支持程度不同，因此可能会出现删除线样式不同的情况。

3. 删除线可以添加动画效果吗？

   可以，可以通过CSS的animation属性来为删除线添加动画效果。