使用css制作标题横条

效果是做头部的优惠信息
使用flexbox做
一般使用两个div 使用定位制作这样的效果 但是当背景内容改变时，文字div的背景容易跟随修改，是用的第二种方法是使用flexbox布局

html代码

优惠信息

css代码
.h-pop-title{
display: flex;
width: 80%;
margin:auto;
}
.h-pop-title .line{
flex: 1;
position: relative;
top:-6px;
border-bottom: 1px solid #61676d;
}
.h-pop-title .text{
padding:0 24px;
font-size: 28px;
}