Ul Li 2nd Line Text Not Properly Align After Using Li:before

This is a common problem but it seemed that I can't solved it. I tried to look for answer but still didn't solved my problem. I have an ul li. The li was set to list-style:none, I

Solution 1:

Here is a working example using the + as the bullet point. Depending on what character you will be using for the bullet point, you may need to adjust the negative text-indent.

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
  text-indent: -0.825em;
}

ulli:before {
  content: "+ ";
}

<ul><li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li><li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li></ul>

Solution 2:

Try setting position: absolute; for your :before pseudo class. This will then allow you to position the bullets wherever you want without affecting the text in the element.