css在文字间加竖线 |css 背景图不重复属性

/* 在文字之间添加竖线 */p {
display: flex;
justify-content: space-between;
align-items: center;
}
p::before, 
p::after {
content: '';
flex: 1;
height: 1px;
background-color: #000;
}
p:before {
margin-right: 10px;
}
p:after {
margin-left: 10px;
}

以上代码使用了flex布局，通过在p标签中添加伪元素::before和::after，同时设置它们的高度、背景颜色、伸缩比等属性，从而在文字之间添加了一条竖线。

值得注意的是，在::before和::after中使用flex: 1，是为了让它们均匀地分布在文字两侧。同时，为了保证竖线与文字之间有一定的距离，使用了margin-right和margin-left。

通过以上代码，大家就可以轻松地实现文本之间添加竖线的效果，让文本更加美观。