Q:

 List tag wrapped content doesn’t start from the same position when multiple lines

I have created an unordered list and used list-style-type:none and list-style-position: outside. 
I am also using the li::before css psuedo-element to remove default bullet points and add a custom color and fonts for bullets. 
In the above scenario, when we have multiple lines of text for the bullet points the text on the second line is not aligned with the first line.  

How can I achieve this?  Here is my code:
  .test-feature ul {
      list-style: disc outside none;
      margin-left: 0;
      padding-left: 1em;
      text-indent: -1.75em;
    }

.test-feature ul li::before {
      content: "\2022";
      color: yellow;
      font-weight: bold;
      display: inline-block;
      width: 1em;
      font-size: 2.2em;
      line-height: 0px;
      padding-left: 1em;
      position: relative;
      top: 0.2em;
    }

A:

You could use CSS flexbox to accomplish this

ul {
  list-style: none;
  text-indent: -1.3em;
  margin-left: 0;
}

ul li::before {
  content: "\2022";
  color: #e74c3c;
  font-weight: bold;
  display: inline-block;
  font-size: 2.2em;
  line-height: 0px;
  position: relative;
  top: 0.3em;
}

ul li {
  display: flex;
}
<ul>
  <li>
    line1<br />
    line2<br />
    line3<br />
    line4
  </li>
</ul>

