Align content between flex items using generated content - html

Question

I have some cosmetic content which I would like to align between flex items which are justified with space-between.
The items have dynamic width.
The result in the following demo is what i'm looking for, except that since the content is purely cosmetic - I want to use generated content for them rather than actual elements.
ul {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding: 0;
}
li:nth-child(odd) {
background-color: lime;
padding: 10px 20px
}
li:nth-child(even) {
margin: 0 auto;
}
<ul class="wpr">
<li>this is item 1</li>
<li>X</li>
<li>item 2</li>
<li>X</li>
<li>item 3 is considerably wider</li>
<li>X</li>
<li>item 4</li>
</ul>
Codepen demo (resize to see the effect)
I have attempted to do this by using absolute positioning - but I don't know if there is a mechanism to center the content between the items this way:
ul {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding: 0;
}
li {
background-color: lime;
padding: 10px 20px;
position: relative;
}
li:after {
content: 'X';
position: absolute;
right: -50%; /* this obviously won't produce the correct centering */
}
<ul class="wpr">
<li>this is item 1</li>
<li>item 2</li>
<li>item 3 is considerably wider</li>
<li>item 4</li>
</ul>
Is it possible with CSS to add this content using generated content instead of actual elements?

Answer 1

Here is an idea with a small drawback because I had to omit the item in the last li:
ul {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding: 0;
}
li {
display: flex;
align-items:center;
flex:1;
}
li span {
background-color: lime;
padding: 10px 20px;
white-space:nowrap;
}
li:after {
content: "X";
flex: 1;
text-align:center;
}
li:last-child {
flex:initial;
}
li:last-child::after {
content:none;
}
<ul class="wpr">
<li><span>this is item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3 is considerably wider</span></li>
<li><span>item 4</span></li>
</ul>

Answer 2

You can do it cleanly and efficiently with absolute positioning:
ul {
display: flex;
align-items: center;
list-style: none;
padding: 0;
}
li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px 20px;
border: 1px dashed red;
position: relative;
}
li + li::before { /* #1 */
content: "X";
position: absolute;
right: 100%;
transform: translateX(50%); /* #2 */
}
<ul class="wpr">
<li>this is item 1</li>
<li>item 2</li>
<li>item 3 is considerably wider</li>
<li>item 4</li>
</ul>
revised codepen
Notes:
The adjacent sibling combinator (+) targets an element that immediately follows another element. In this case, the pseudo-element will only apply to li elements that follow another li. This will naturally exclude the ::before from the first li.
For an explanation of how this centering method works, see this post: Element will not stay centered, especially when re-sizing screen

Answer 3

One improvement i can suggest is replacing
li:after {
content: "X";
flex: 1;
text-align:center;
}
li:last-child {
flex:initial;
}
li:last-child::after {
content:none;
}
with
li:not(:last-child)::after {
content: "X";
flex: 1;
text-align:center;
}