如果垂直列表中有一个元素（文本）左侧有一个图标，如何在一行中垂直对齐文本

Question

也许有人知道一种将文本对齐一行并将图标向左移动的好方法

HTML

CSS

屏幕

Answer 1

将position: absolute应用到pseudo-element ::before上，然后根据需要使用left的定位值。 left: 0将 position 它尽可能地向左（在本例中位于<li>的顶部），因此只需使用负值将其进一步向左。 请记住在<li>元素上也应用position: relative ，因此::before元素相对于<li>元素absolute定位。

 ul { list-style-type: none; margin: 0; }.element { position: relative; }.element::before { content: '+'; position: absolute; left: -15px; top: 0; }

 <ul> <li>text</li> <li class="element">text</li> <li>text</li> </ul>