标签内的项目符号点如何使用<li>列表样式位置具有顶部边框：内部

Question

我正在整理一个无序的列表。每个行项目包含几个元素(<h>标记、<p>标记等(，并由top-border分隔。

默认情况下，项目符号点不在顶部边界下方。为了解决这个问题，我将list-style-position: inside;分配给了<ul>。然而，现在列表的内容"；"包装"；围绕着要点。如果能将要点和内容垂直分离，那就太好了。

li {
border-top: 1px solid #000000
}
ul.inside {
list-style-position: inside;
}

<ul>
<li>
Item 1
<p> Content does not wrap around bullet point. Great! But border-top is not over the bullet </p>
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
<hr>
<ul class="inside">
<li>
Item 1
<p> Content wraps around the bullet point. Boo! But border-top is over the bullet though! </p>
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>

有干净的方法吗？

Answer 1

这里是

li {
border-top: 1px solid #000000
}
ul.inside {
list-style-position: inside;
}
ul
{
list-style: none;
padding: 0;
}
li::before {
Content: "•";
font-size: 25px;
position: relative;
top: 2px;
padding-right: 5px;
}

<ul>
<li>
Item 1
<p> Content does not wrap around bullet point. Great! But border-top is not over the bullet </p>
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>

<ul class="inside">
<li>
Item 1
<p> Content wraps around the bullet point. Boo! But border-top is over the bullet though! </p>
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>

Answer 2

在现代CSS的帮助下，使用CSS网格找到了一个创新的解决方案。将<li>标记中的内容封装在<div>中是很重要的。

也就是说，此解决方案需要:before，而不适用于::marker。

ul {
padding: 0;
}
li {
border-top: 1px solid #000000;
display: grid;
grid-template-columns: 0 1fr;
grid-gap: 1em;
}
ul li::before {
content: '•';
font-size: 1em;
}

<ul>
<li>
<div>
<div>Hello</div>
<div>Second div</div>
</div>
</li>
<li>
Bullet 2
</li>
<li>
Bullet 3
</li>
</ul>