将自定义li项目符号与文本对齐

Question

我正在尝试增加li元素旁边的项目符号点的大小。 共识似乎是，这样做的方法是删除“标准”点，使用:before选择器插入一个自定义点，并增加插入点的字体大小。

好吧，这种作品，但这意味着文本和要点变得不对齐。 看到这里我的代码。

有没有一种方法可以解决此问题，而不仅仅是依靠硬编码，因为文本需要向下移动许多像素？

Answer 1

设置项目符号的position:absolute

 section { border: 1px solid black; display: flex; justify-content: center; width: 300px; } ul { font-family: 'Segoe UI'; list-style: none; padding: 0; } li { font-size: 22px; line-height: 40px; position: relative; padding-left: 30px; } li::before { content: "\\2022"; font-size: 70px; vertical-align: middle; position: absolute; left: 0; } 

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

Answer 2

我将显示为inline-table并更改line-height 。

 section{ border: 1px solid black; display: flex; justify-content: center; width: 300px; } ul{ font-family: 'Segoe UI'; list-style: none; padding: 0; } li{ font-size: 22px; line-height: 40px; } li::before{ content: "\\2022"; font-size: 70px; vertical-align: middle; display: inline-table; line-height: 0.4em; } 

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