css 双实线 只出现一条

CSS双实线只出现一条是CSS实现较为常见的一种效果，可以让我们的设计更加美观。通过使用CSS的伪元素before和after可以实现此效果。

    .double-line {
            position: relative;
            text-align: center;
    }
    .double-line:before,    .double-line:after {
            content: "";
            position: absolute;
            top: 50%;
            border-top: 1px solid #000;
            width: 50%;
            z-index: -1;
    }
    .double-line:before {
            left: 0;
    }
    .double-line:after {
            right: 0;
    }
    

在上面的代码中，.double-line是要添加双实线效果的元素的类名。通过设置position: relative使得.before和.after伪元素可以根据它的位置进行绝对定位。

在伪元素的内容中，使用content: ""来指示伪元素的内容为空。

然后设置.top为50%将伪元素的位置设置在该元素的中心位置。

接着就是设置伪元素的样式。设置伪元素的宽度为50%，上下边框为1px，颜色为黑色。z-index: -1使得伪元素在该元素后方，不会遮挡内容。

最后，通过在.before和.after中分别设置left和right为0，来使两侧的实线在元素的两侧出现。

通过这样一些简单的CSS代码，就可以轻松实现双实线只出现一条的效果啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！