使用before及after设置定位问题（使用环境：react及scss）

使用环境：react及scss
html中:

常见问题

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;
        }
    }

效果如图：

2.png