使用环境:react及scss
html中:
<span className='desc'>常见问题</span>
css中:
.desc {
position: relative;
font-size: 12px;
text-align: center;
display: inline-block;(必须加上,否则手机端会出现文本不在中间的情况)
&::before, &::after {
display: inline-block;
position: absolute;
content: '';
top: 50%;
margin-top: -1px;
width: 18px;
height: 1px;
background-color: #BDBDBD;
}
&::before{
left: -30px;
}
&::after {
right: -30px;
}
}
效果如图: