CSS3在文字两边加上横线

CSS3在文字两边加上横线

知识点分析：

使用css3 ::before、::after选择器和content属性来实现。

::before 选择器向选定的元素前插入内容，::after 选择器向选定的元素之后插入内容。

html:

<h1 class="tit">荷塘月色</h1>

css:

    <style>
        .tit{
            display: flex;
            flex-direction: row;
            color: #7a58bf;
        }
        .tit::before, .tit::after{
            content: '';
            flex: 1 1;
            margin: auto;
            border-bottom: 2px solid #7a58bf;
        }
    </style>