使用生成的内容

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中的项目：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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的{​​{1}}个元素。这自然会将li从第一个::before排除。

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;
    }