缩进列表换行符 :before content答案

【问题标题】：Indent list line break with :before content缩进列表换行符 :before content
【发布时间】：2022-05-09 20:00:58
【问题描述】：

我有一个列表，其中一些项目很长，因此会在小型设备上导致换行。每个列表项之前都需要> 符号。我不想使用图像（例如列表样式图像）。因此，我现在使用:before 选择器，但理论上我也可以将它添加到每个列表项的开头。

现在我的问题。发生换行时，中断内容不会与其他内容对齐，而是从> 符号的正下方开始。当然，我希望它与其他内容保持一致。

这是我的示例代码：

HTML：

<ul class="test">
    <li>Text Text Text</li>
    <li>Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</li>
    <li>Text Text Text</li>
</ul>

CSS：

.test {
    list-style: none;
    margin: 0;
    padding: 0;
}
.test li:before {
    content: ">";
    padding-right: 15px;
}

我创建了一个FIDDLE。

恐怕这可能是一个常见问题，但我没有找到任何解决方案，使用 :before 伪选择器作为列表项图像。

【问题讨论】：

标签： html css html-lists line-breaks

【解决方案1】：

你可以通过稍微改变你的标记来实现这一点；

<ul class="test">
    <li><div>&gt;</div><div class="one">Text Text Text</div></li>
    <li><div>&gt;</div><div class="one">Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></li>
    <li><div>&gt;</div><div class="one">Text Text Text</div></li>

即 > 和文本可以在单独的 div 中，然后您可以应用以下样式：

.test {
    list-style: none;
    margin: 0;
    padding: 0;
}

li > div{
    display:inline-block;
    height:100%;
    //background:red;
    width:5%;
    vertical-align:top;
}

.one{
    width:95%;
}

看小提琴：http://jsfiddle.net/SGz75/1/

【讨论】：

然而，这需要在任何地方写&gt;，尽管它应该是标记的一部分而不是内容。 ://
@stefanct 对我有用，但我在订单项之间的边距不再受到尊重。嘘，这么近。

【解决方案2】：

您真正需要做的是使用“绝对”和“相对”
实际上，我认为避免操纵列表 HTML

示例：

<ul>
  <li>some text 1</li>
  <li>some text that breaks a line 2</li>
  <li>some text 3</li>
  <li>some text 4</li>
  <li>some text 5</li>
</ul>

<style>
ul {list-style: none; padding: 0; max-width: 100px;}
li {position: relative; padding: 0 0 0 20px;}
li:before {content: '//'; position: absolute; top: 0; left: 0;}
</style>

【讨论】：