如何实现下图实线插入一段文字呢?
分割线添加文字主要思想是:
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%);
}
网友评论