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 class="marker-primary">Leaf</li>
<li class="marker-info">Intermediate</li>
<li class="marker-danger">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?
>Solution :
I made some changes, 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 class="marker-primary">Leaf</li>
<li class="marker-info">Intermediate</li>
<li class="marker-danger">Root</li>
</ul>