CSS伪元素相对于内容有没有可能具有相同的宽度？
我的尝试:
null
.item::before, .item:after{
background: url(https://i.imgur.com/rL1l2Rd.png) center center no-repeat;
content: ' ';
height: 100px;
display: inline-block;
vertical-align: middle;
width: 300px;
}<h1 class='item'>content</h1>
<h1 class='item'>larger content</h1>null
使用flexbox
null
.item::before,
.item:after {
background: #000;
align-self:center;
height:7px;
border-radius:10px;
content: ' ';
margin:5px 5px 0;
}
h1 {
display:flex;
}
.item::before {
flex-basis:200px;
}
.item::after {
flex-grow:1;
}<h1 class='item'>content</h1>
<h1 class='item'>larger content</h1>