How to wrap text away from the bullet?

Question

Is there away to make the text wrap away from the bullet, like using list-style-position: outside but using my custom pseudo-element bullet instead?

div {
  width: 250px
}

ul {
  padding: 10px;
  list-style: none;
}

ul>li::before {
  padding-right: 10px;
  position: relative;
  top: 5px;
  font-size: 2em;
  content: "\2022";
  color: #fee100;
}

<div>
  <ul>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
    <li>VLorem Ipsum is simply dummy text of the printing.</li>
  </ul>
</div>

Answer 1

You can use absolute position instead of relative with negative values:

div {
  width: 250px
}

ul {
  padding: 10px;
 list-style: none;
}

ul>li {
 position:relative;
}

ul>li::before {
  padding-right: 10px;
  position: absolute;
  left:-15px;
  top:-10px;
  font-size: 2em;
  content: "\2022";
  color: #fee100;
}

<div>
  <ul>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
    <li>VLorem Ipsum is simply dummy text of the printing.</li>
  </ul>
</div>