Html 使用自定义CSS内容处理列表项内的段落

这是非样式列表项中段落的外观（

）：

我知道对于这个特定的自定义列表样式类型，我可以使用列表样式图像。但是，对于其他自定义列表样式类型，我无法使用列表样式图像

我如何使自定义CSS内容列表样式类型的列表项中的段落不跳到下一行的开头？我们的目标是让这些自定义列表样式列表能够像不设置样式的常规列表一样处理段落

---

以下是实现所需样式的一种方法

使用绝对定位将来自

：：的生成内容放置在
块元素左边缘的
伪元素之前

首先，需要将
position:relative
添加到
.docs test
CSS规则中，以允许相对于
li
父块定位伪元素

其次，添加
position:absolute
和适当的
top
和
left
偏移值以获得所需的样式

您还需要将
p
元素上的边距重置为零


.docs测试{
颜色：红色；
列表样式类型：无；
显示：内联块；
位置：相对位置；
}
.docs测试：：之前{
内容：'\2022'；
颜色:"828282 ;；
显示：块；
文本对齐：居中；
位置：绝对位置；
轮廓：1px灰色虚线；/*仅用于演示*/
宽度：20px；
左：-20px；
排名：0；
}
.docs测试p{
显示：内联块；
保证金：0；
}



呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵




呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵


那么，你需要在p标签中为每个单词添加项目符号吗？@HemaNandagopal不，我只是希望整个段落不要像前面有一个

标签一样跳跃。基本上我希望它看起来像第一张图片。我可以通过对列表项使用
display:inline
轻松复制第一幅图像，但它无法处理多个段落。明白了。抱歉，我的系统不支持该img文件。您在js演示中使用了span，但在这里使用了p标记？是的，我可能会在播放时将演示更改为使用span而不是p，对不起，投了赞成票。你能详细解释一下为什么会发生这种跳跃吗？
<li>
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

<li class="docs-test">
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

.docs-test {
  color: red;
  list-style-type: none;
}

.docs-test::before {
  content: '\2022 ';
  color: #828282;
  display: inline-block;
  margin-right: 10px;
}

.docs-test p {
  display: inline-block;
}