html - 使用生成的内容对齐 Flex 元素之间的内容

Question

我有一些化妆品内容，我想在 flex 元素之间对齐，这些元素之间用空格对齐。

这些元素具有动态宽度。

以下演示中的结果就是我正在寻找的结果，除了，因为内容纯粹是装饰性的 - 我想为它们使用生成的内容，而不是实际元素。

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 (调整大小查看效果)

我尝试通过使用绝对定位来做到这一点 - 但我不知道是否有一种机制可以通过这种方式使元素之间的内容居中:

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>

CSS 是否可以使用生成的内容而不是实际元素来添加此内容？

Answer 1

这是一个有小缺点的想法，因为我不得不省略最后一个 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>