如何在LI基础内容后、嵌套列表前正确放置伪元素？

嘿，我完全懂你的困扰！你想要让伪元素内容（比如string这类类型标记）紧紧跟在列表项的主文本（比如send_id）后面，而不是跑到嵌套的<ul>描述内容之后对吧？之前直接给.properties li用:before/:after没达到预期效果，核心问题是伪元素会被放在整个<li>元素的首尾，而你的<li>里还包含了嵌套列表，所以伪元素自然就跑到嵌套列表的后面了。

最靠谱的解决方案：给主文本单独加容器 #

这种方法兼容性拉满，逻辑也清晰，只需要稍微调整HTML结构，把列表项的主文本用一个<span>包裹，再给这个<span>加伪元素就行：

调整后的HTML结构

<ul class="properties">
  <li>
    <span class="prop-label">send_id</span>
    <ul>
      <li>该发送请求的唯一标识符。</li>
    </ul>
  </li>
  <!-- 其他不同类型的列表项示例 -->
  <li>
    <span class="prop-label receive_time">receive_time</span>
    <ul>
      <li>请求接收的时间戳。</li>
    </ul>
  </li>
</ul>

对应的CSS代码

.properties li, .properties ul { 
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 给主文本的span添加基础伪元素样式 */
.properties .prop-label:after {
  margin-left: 4px;
  font-style: italic;
  color: #555;
}
/* 不同类型的伪元素内容可以通过类名区分 */
.properties .prop-label:after {
  content: " *string*";
}
.properties .receive_time:after {
  content: " *timestamp*";
}

效果说明 #

这样设置后，*string*会紧紧跟在send_id后面，完全符合你想要的布局，嵌套列表的描述内容会正常排在下方，不会和伪元素混在一起。后续要加其他类型的标记，只需要给对应<span>加类名、修改CSS的content值就行，维护起来超方便。

如果不想修改HTML？（兼容性有限） #

要是你实在不想调整HTML结构，可以试试CSS的:has()选择器（注意：需要Chrome 101+、Firefox 121+以上版本支持），但这种方法不如加容器稳定，因为CSS对文本节点的支持本来就有限：

.properties li:has(> ul) {
  position: relative;
}
.properties li:has(> ul)::before {
  content: "*string*";
  position: absolute;
  left: 65px;
  top: 0;
  font-style: italic;
  color: #555;
}

但还是更推荐第一种加容器的方案，不仅兼容性好，后续扩展不同类型标记的成本也更低。

内容的提问来源于stack exchange，提问作者Paul