title: How to make and well position HTML custom list marker
body: <p>I have this inline unordered list with custom markers.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
        list-style: none; /* Remove default bullets */
    }
    ul li {
        display:inline;
        margin-right: 20px;
        margin-left: 20px;
    }
    ul li::before {
        content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
        font-weight: bold; /* If you want it to be bold */
        font-size: 30px;
        display: inline-block; /* Needed to add space between the bullet and the text */
        width: 1em; /* Also needed for space (tweak if needed) */
        margin-left: -1em; /* Also needed for space (tweak if needed) */
    }
    ul .marker-info::before {
        color: rgb(116, 6, 206); /* Change the color */
    }
    ul .marker-primary::before {
        color: rgb(79, 66, 252); /* Change the color */
    }
    ul .marker-danger::before {
        color: rgb(253, 49, 49); /* Change the color */
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li class="marker-primary"&gt;Leaf&lt;/li&gt;
      &lt;li class="marker-info"&gt;Intermediate&lt;/li&gt;
      &lt;li class="marker-danger"&gt;Root&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But as you can see here in the output the marker position is not aligned with text. And the distance between <code>list-item</code> is not same. How can I fix this?</p>