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>