使用CSS“组合”列表项对

Question

给出

<ul>
  <li class="label">City</li>
  <li class="value">New York</li>
  <li class="label">State</li>
  <li class="value">NY</li>
  <li class="label">ZIP</li>
  <li class="value">10010</li>
 </ul>

是否可以将其呈现为

• 城市：纽约
• 州：纽约
• 邮政编码：10010

代替正常

• 城市
• 纽约
• 状态
• 纽约
• 邮政编码
• 10010

仅使用CSS？我无法更改来源，也无法使用Javascript。

Answer 1

似乎可行：将标签浮动，然后将值更改为一个块。

.label {float:left}
.label::after {content: ": "; white-space: pre}
.value {display: block} 

https://jsfiddle.net/mccaskey/b76nkr8q/

Answer 2

您可以尝试一下（仅在Firefox和Chrome桌面上经过测试）

.label {
  display: inline-block;
}
.label::before {
  content: "\2022";
  padding-right: 3px;
  font-size: 120%;
}
.label::after {
  content: ":";
}
.value {
  display: inline;
}
.value::after {
  content: "\A";
  white-space: pre;
}

<ul>
  <li class="label">City</li>
  <li class="value">New York</li>
  <li class="label">State</li>
  <li class="value">NY</li>
  <li class="label">ZIP</li>
  <li class="value">10010</li>
 </ul>

小提琴

https://jsfiddle.net/Hastig/xm8oL4bf/

信用

给CSS Tricks的换行技巧

Answer 3

尝试一下：

li { display: inline; list-style-type: none; }

li:nth-child(2n + 1):after { content : ':'; margin-left: 5px; }

li:nth-child(2n +1):before { content: "\2022"; display: inline; margin-right: 5px; }

li:nth-child(2n):after { content: ''; display: block; }

<ul>
  <li class="label">City</li>
  <li class="value">New York</li>
  <li class="label">State</li>
  <li class="value">NY</li>
  <li class="label">ZIP</li>
  <li class="value">10010</li>
</ul>