html
<!DOCTYPE html>
<html>
<head>
<style>
.father {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 5px;
}
.title {
font-size: 12px;
color: #405562;
line-height: 20px;
font-weight: 400;
/* 配合父级的align-items: flex-start;子元素长度才不会是其父级的宽度 */
position: relative;
}
.title span {
/* 设置position为非static值，z-index才生效 */
position: relative;
z-index: 99;
}
.title div {
width: 100%;
/* 长方形的宽度 */
height: 8px;
/* 长方形的高度 */
background: #F0F0F0;
border-radius: 4px;
position: absolute;
left: 0px;
top: 10px;
z-index: 0;
}
.num {
font-size: 15px;
color: #333333;
line-height: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="father">
<div class="title">
<span>文本文本文本文本文本文本</span>
<div></div>
</div>
<span class="num">100</span>
</div>
</body>
</html>效果如下：
