css 标题三条横线

HTML:

    <div class="rule-title">
        <div class="menu-icon"><div>
            活动*规则
        <div class="menu-icon"><div>
    </div>

CSS:

    .rule-title {
        font-weight: bold;
        margin: 30px auto;
        font-size: 32px;
    }
    /* 3条横线 */
    .rule-title .menu-icon {
        display: inline-block;
        width: 50px;
        height: 2px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;

        padding: 5px 0;
        margin: 0 10px 10px;
        background-clip: content-box;
        /*
            background-clip: 规定背景的绘制区域。
                border-box-----背景被裁剪到边框盒；
                padding-box-----背景被裁剪到内边距框；
                content-box-----背景被裁剪到内容框；
        */
    }

原文地址：https://www.cnblogs.com/queende7/p/8666514.html