css分割线

方式一：使用after与before设置（推荐）

.box_area {
    position: relative;
    color: #000;
    font-size: 24px;
    text-align: center;
    overflow: hidden;
}
.box_area::after,
.box_area::before {
    position: absolute;
    top: 50%;
    content: '';
    width: 100%;
    height: 1px;
    background: #000;
}
.box_area::after {
    margin-left: 10px;
}
.box_area::before {
    margin-left: -10px;
    transform: translateX(-100%);
}

<div class="box_area">使用after与before设置</div>

方式二：使用flex布局设置

.box_area {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}
.box_area .line_area {
    width: 40%;
    border-top: 1px dashed #7965ef;
}
.box_area .txt_area {
    margin: auto 10px;
}

<div class="box_area">
    <span class="line_area"></span>
    <span class="txt_area">使用flex布局设置</span>
    <span class="line_area"></span>
</div>

方式三：使用vertical-align属性设置

.box_area {
    font-size: 24px;
    text-align: center;
}
.box_area .line_area {
    display: inline-block;
    width: 150px;
    border: 1px solid #000;
}
.box_area .txt_area {
    color: #000;
    vertical-align: -20%;
    margin: auto 5px;
}

<div class="box_area">
    <span class="line_area"></span>
    <span class="txt_area">使用vertical-align属性设置</span>
    <span class="line_area"></span>
</div>