我已经使用CSS选择器“ before ::”和CSS Counter创建了一个自定义列表标记。
替换列表标记按预期显示,但是我无法固定自定义标记和列表内容之间的缩进,因此当列表项跨越多行时,各行之间会有固定的缩进和标记。
ul {
list-style: none;
}
li {
counter-increment: myCounter;
}
li::before {
content: counter(myCounter) ' ==> ';
}
<ul>
<li> My first list </li>
<li> My second list </li>
<li> My third extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra long List </li>
<li> My fourth list </li>
</ul>
以下是(类似于我的,但没有用::before
选择器制作的标记)回答的另一个问题,但是在这种情况下不起作用: How to keep indent for second line in ordered lists via CSS?
请清楚一点,我想执行以下缩进样式(但带有我的自定义列表标记):
ul {
list-style-position: outside;
}
<ul>
<li>My first list</li>
<li>My second list</li>
<li>My third really really really really really really really really really really really really long list</li>
<li>My fourth list</li>
</ul>