CSS 之前之前相同的宽度

Question

CSS 个伪元素是否可以相对于内容具有相同的宽度？

这就是我想要的结果

我的尝试：

.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>

Answer 1

为此使用 flexbox

.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>

CSS 之前之前相同的宽度

CSS after before same width

css

pseudo-element