使用生成的内容在Flex项目之间对齐内容

Question

我有一些化妆品内容，我想在柔性物品之间对齐，这些物品与空间之间是合理的。

这些项目具有动态宽度。

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

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>

Answer 2

您可以通过绝对定位干净而有效地完成：

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

笔记：

1. adjacent sibling combinator（+）瞄准紧跟另一个元素的元素。在这种情况下，伪元素将仅适用于跟随另一个li的li元素。这自然会排除第一个::before的li。
2. 有关此居中方法如何工作的说明，请参阅以下文章：Element will not stay centered, especially when re-sizing screen

Answer 3

我可以建议的一个改进就是取代

li:after {
  content: "X";
  flex: 1;
  text-align:center;
}
li:last-child {
 flex:initial;
}
li:last-child::after {
 content:none;
}

同

li:not(:last-child)::after {
      content: "X";
      flex: 1;
      text-align:center;
    }