设置文字左右中划线

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 800px;
                height: 50px;
                border: 1px solid red;
                margin: 40px auto;
            }
            h1 {
                margin: 0px;
                padding: 0px;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;                 
                line-height: 50px;
                color: red;
                position: relative;
                overflow: hidden;
                white-space: nowrap;
                text-align: center;
            }

            h1:before,
            h1:after {
                content: " ";
                position: relative;
                display: inline-block;
                width: 35%;  /* 调节左右中划线的长度*/
                height: 1px;
                vertical-align: middle;   /*对象内容的垂直对其方式*/
                background: blue;
            }

            h1:before {
                left: -5px;     /*设置线与文字的距离*/
                margin: 0 0 0 -50%;
            }

            h1:after {
                left: 5px;
                margin: 0 -50% 0 0;
            }
        </style>
    </head>

    <body>
        <div>
            <h1>我是你大爷</h1>
        </div>

    </body>

</html>

设置文字左右中划线

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

    <head>
        <meta charset="UTF-8" />
        <title> </title>
        <style type="text/css">
            /* 渐变 color1 - color2 - color1 */

            hr.style-one {
                border: 0;
                height: 1px;
                background: #333;
                background-image: linear-gradient(to right, #ccc, #333, #ccc);
            }
            /* 透明渐变 - color - transparent */

            hr.style-two {
                border: 0;
                height: 1px;
                background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
            }
            /* 双线 */

            hr.style-three {
                border: 0;
                border-bottom: 1px dashed #ccc;
                background: #999;
            }
            /* 单线阴影 */

            hr.style-four {
                height: 12px;
                border: 0;
                box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
            }
            /* 云朵状 */

            hr.style-five {
                border: 0;
                height: 0;
                /* Firefox... */
                box-shadow: 0 0 10px 1px black;
            }

            hr.style-five:after {
                /* Not really supposed to work, but does */
                content: "\00a0";
                /* Prevent margin collapse */
            }
            /* 内嵌 */

            hr.style-six {
                border: 0;
                height: 0;
                border-top: 1px solid rgba(0, 0, 0, 0.1);
                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            }
            /* 晕状 */

            hr.style-seven {
                height: 30px;
                border-style: solid;
                border-color: black;
                border-width: 1px 0 0 0;
                border-radius: 20px;
            }

            hr.style-seven:before {
                display: block;
                content: "";
                height: 30px;
                margin-top: -31px;
                border-style: solid;
                border-color: black;
                border-width: 0 0 1px 0;
                border-radius: 20px;
            }
            /* 文字插入式 */

            hr.style-eight {
                padding: 0;
                border: none;
                border-top: medium double #333;
                color: #333;
                text-align: center;
            }

            hr.style-eight:after {
                content: "gb";
                display: inline-block;
                position: relative;
                top: -0.7em;
                font-size: 1.5em;
                padding: 0 0.25em;
                background: white;
            }
            /* 分隔线统一样式 */

            hr {
                margin: 40px 0;
            }
        </style>
    </head>

    <body>
        <hr class="style-one">

        <hr class="style-two">

        <hr class="style-three">

        <hr class="style-four">

        <hr class="style-five">

        <hr class="style-six">

        <hr class="style-seven">

        <hr class="style-eight">
    </body>

</html>