css how to add horizontal lines on both sides of text

<div class="title">
<h2 class="title-text"><span>工作经历</span></h2>
</div>

.title-text span {
display: block; /*Setting to a block-level element will create a line up and down centering effect*/
position: relative; /*Position the horizontal line (when the parent element of the horizontal line)*/
.fs(14 );
text-align: center;
}
.title-text span:before, .title-text span:after {
content: '';
position: absolute; /*position the background horizontal line*/
top: 50%;
background : #8c8c8c; /*Color of background horizontal line*/
width: 35%; /*Length of horizontal horizontal line on one side*/
height: 1px;
}
.title-text span:before {
left: 2%; /*Adjust background horizontal Line left and right distance*/
}
.title-text span:after {
right: 2%;
}