html css分割线添加文字

如何实现下图实线插入一段文字呢？

主要思想是：

1. 实现是 div 的 content 部分，实线的颜色就是 background-color

 2. 文字部分可以作为父div 内嵌一个div ，然后再通过 transform: translateY(-50%);  移动Y轴上的位置

3. 使用position: relative（父）和 position: absolute（子）来进行定位，移动文字位置

实现代码如下：

// html

<div class="divider">

        <div class="divider-text">这是一段文字或者图标</div>

</div>

// css

.divider {

        width: 100%;

         height: 1px; 

        position: relative;

        background-color: #fa83345c;

}

.divider-text{

        position: absolute;  

        background-color: #FFF; 

        padding: 0 20px;

        color: #303133;  

        left: 20px;

        transform: translateY(-50%); 

}