使用span标签用css实现标题前后的横线效果

效果图

这里使用的是CSS伪类来实现,使用after和before在标签里创建一个内容，然后给这个内容加样式，设置它的长宽高度，颜色，左右边距下面是代码部分

<!--css部分-->
<style>
        .title{
            position: absolute;
            font-size: 32px;
            color: #29292f;
            padding-left: 4%;
        }
        .title:before{
            content:'';
            position: absolute;
            width: 28px;
            height: 2px;
            top: 50%;
            background-color: #000;
            left: 105%;
        }
        .title:after{
            content:'';
            position: absolute;
            width: 28px;
            height: 2px;
            top: 50%;
            background-color: #000;
            left: 0;
        }
    </style>


<!--标签部分-->
<span class="title">标题</span>