html - 列表元素符号后强制换行

Question

我正在寻找自动将列表圆盘标记放在文本上方而不是左侧的好方法。像这样:

我目前正在使用类似的东西:

<li>
    <br />
    Item 1
</li>

<li>
    <br />
    Item 2
</li>

<li>
    <br />
    Item 3
</li>

强制将文本放置在点下方，但一方面在每个列表项中的文本之前添加换行符会使来源非常困惑，另一方面，它没有达到我的预期，因为即使使用 text-align: center 由于每个点右侧都有一个隐式边距，所以点稍微偏左。

也许我缺少一些 CSS 属性或者我的方法不好。欢迎任何建议，谢谢。

Answer 1

li {
    display: inline-block;
    background: pink;
}
li::before {
    content:'•';
    display: block;
    text-align: center;
}

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>