纯Css如何实现双删除线？我们知道，在Css世界中，实现单删除线还是比较简单的，通过设置text-decoration的

我们知道，在Css世界中，实现单删除线还是比较简单的，通过设置text-decoration的选项即可完成，简单介绍一下text-decoration属性吧。

text-decoration

候选值有none、underline、overline、line-through、blink、inherit

none不设置,定义一个标准的文本

text-decoration:none

underline为文本增加下划线

text-decoration:underline

overline为文本增加上划线

text-decoration:overline

line-through为文本单删除线

text-decoration:line-through

blink定义闪烁的文本

text-decoration:line-through

inherit规定应该从父元素继承 text-decoration 属性的值

text-decoration:inherit

当然除此单设置之外，还支持复合设置，如:

text-decoration: underline wavy green; /* 绿色波浪形下划线 */

更多属性大家可以去官方学习文档进行属性的了解和学习。

双删除线

如图可知，什么事双删除线，那么接下来就是如何实现双删除线，实现双删除线方式有很多种，比如：额外两个元素贴附在原文字上面、伪元素的形式等。如下实现方案：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双删除线</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        span {
            margin-right: 30px;
            position: relative;
            color: #333;
        }

        span:after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-bottom: 4px double #333;
            content: '';
            display: block;
            width: 100%;
        }
    </style>
</head>

<body>
    原价：¥ <span>9998.00</span> 特惠价：¥ 998.00
</body>

</html>

使用伪元素的形式，在文本开头或者尾部插入一个双边框线进行实现，如果大家有更好的实现方案，欢迎评价交流。