How to use an asterisk in list items instead of a bullet

Question

I want to use "*" in one of the bullet items. I have used Pseudo class to one of the element. But i see some blank space before "text2" in below example to the pseudo li element

li {
  list-style: none;
}

li.str:before {
  content: "*";
  position: relative;
  left: -15px;
  bottom: -3px;
}

<ul>
  <li>text1</li>
  <li class="str">text2</li>
</ul>

Could you please help me here

Answer 1

Set your li tags in position relative and your pseudo-element in position absolute :

li {
  position: relative;
  list-style: none;
}
li.str:before {
  content: "*";
  position: absolute;
  left: -15px;
  bottom: -3px;
}

<ul>
  <li>text1</li>
  <li class="str">text2</li>
</ul>