HTML List Marker Positioning-CodePudding

I have an inline unorder list with a custom list marker.

my template:

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 */
  }

<ul>
    <li >Leaf</li>
    <li >Intermediate</li>
    <li >Root</li>
</ul>

But as you can see here in the output the marker position is not aligned with text. And the distance between list-item is not same. How can I fix this?

CodePudding user response：

I made some changes (there are others ways too of course), and here you go :

ul {
  list-style: none; 
}
ul li {
  display: inline-block;
  padding: 0 20px;
  position: relative;
}
ul li::before {
  content: "\2022";
  font-weight: bold;
  font-size: 30px;
  position: absolute;
  left: 0;
  top: -50%;
}
ul .marker-info::before {
  color: rgb(116, 6, 206); 
}
ul .marker-primary::before {
  color: rgb(79, 66, 252); 
}
ul .marker-danger::before {
  color: rgb(253, 49, 49); 
}

<ul>
  <li >Leaf</li>
  <li >Intermediate</li>
  <li >Root</li>
</ul>

CodePudding user response：

The issue is caused because the text within the list is not vertically aligned in the middle. One of the easy solutions is to use Flexbox. See the comments within CSS:

ul {
      list-style: none;
  }
  ul li {
      margin-right: 20px;
      margin-left: 20px;
      display: inline-flex; /* adds flexbox to vertical align text */
      align-items: center; /* vertically align the text within the flexbox */
  }
  ul li::before {
      content: "\2022";
      display: inline-block;
      font-weight: bold;
      font-size: 30px;
      width: 1em;
      margin-left: -1em;
  }
  ul .marker-info::before {
      color: rgb(116, 6, 206);
  }
  ul .marker-primary::before {
      color: rgb(79, 66, 252);
  }
  ul .marker-danger::before {
      color: rgb(253, 49, 49);
  }

<ul>
    <li >Leaf</li>
    <li >Intermediate</li>
    <li >Root</li>
</ul>

CodePudding user response：

If I have understood well the question, for vertical aligning the marker is vertical-align:middle; in ul li::before section. What do you mean by the distance between list-item is not the same?