how vertically align text on one line, if there is one element (text) in the vertical list with an icon on the left

Question

maybe someone knows a good way to align the text on one line and shift the icon to the left

HTML

CSS

Screen

Answer 1

Apply position: absolute to the pseudo-element ::before and use the positioning value left to position it however you like. left: 0 will position it as far away to the left as possible (on top of the <li> in this case), so just use a negative value to put it further to the left. Remember to apply position: relative on the <li> -element as well, so the ::before -element is positioned absolute relatively to the <li> -element.

 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>