Css 如何在不使用绝对定位的情况下使用内联伪元素将元素环绕内联元素

我想在内联元素周围包装一个容器，这样我就可以将它们放在任何我想要的地方，并应用背景色

我有两个内联块元素，其中内联块元素有两个也内联的伪元素。 当我尝试使用内联元素或内联块元素包装此内容时，我应用的背景仅应用于非psuedo元素的文本宽度，而忽略：before和：after容器

如果没有绝对定位，如何解决这一问题？理想情况下，我会让背景色包含所有子元素（伪元素）

span{
背景：绿色；
}
.包裹{
空白：nowrap；
显示：内联块；
}
.content:之后，.content:之前{
内容：“；
显示：内联块；
宽度：50%；
高度：1米；
填充：0px；
边际：0px；
背景：红色；
}
.内容{
显示：内联块；
}

福吧巴兹酒店


福吧巴兹福吧


foo bar baz foo bar baz foo bar baz

似乎您希望红色区域与绿色区域相等。CSS网格可以使用如下所示的

fr

单元执行此操作：

.content:之后，
.内容：以前{
内容：“；
高度：1米；
背景：红色；
}
.内容{
显示：内联网格；
空白：nowrap；
网格模板列：1fr 2fr 1fr；
对齐项目：居中；
背景：绿色；
保证金：5px；
}

福吧巴兹酒店


福吧巴兹福吧


foo bar baz foo bar baz foo bar baz

问题是宽度的50%，因为2*50%+内容>100%，所以有溢出