I need a way to group my inline elements together in a container so that I can control their placement and add a background color.
My issue is with two inline block elements, where the inner one has two pseudo elements that are also inline. When I try to wrap these elements in another inline or inline-block element, the background color only applies to the non-pseudo element's text width, ignoring the :before and :after containers.
https://i.sstatic.net/GOhbk.png
Is there a solution to this problem without resorting to absolute positioning? My goal is to have the background color encompass all child (pseudo) elements.
span {
background: green ;
}
.wrap {
white-space:nowrap;
display: inline-block;
}
.content:after,.content:before {
content: " ";
display: inline-block;
width: 50%;
height: 1em;
padding:0px;
margin:0px;
background: red;
}
.content {
display:inline-block;
}<span>
<div class="wrap">
<div class="content">
foo bar baz
</div>
</div>
</span>
<BR/>
<span>
<div class="wrap">
<div class="content">
foo bar baz foo bar
</div>
</div>
</span>
<BR/>
<span>
<div class="wrap">
<div class="content">
foo bar bazfoo bar baz foo bar baz
</div>
</div>
</span>