Custom HTML list bullets & text wrapping / aligning
15,383
Here's a working example: http://jsfiddle.net/77PFX/
It uses the :before
pseudo-element, which cleans up your markup a bit. The bullets are positioned absolutely, so they don't interfere with the flow of inline content in the <li>
.
HTML
<ul class="list">
<li><a href="#">Text</a></li>
<li><a href="#" style="color: red">Text that is a bit too long and shows up under our "bullet"</a></li>
<li><a href="#">Text</a></li>
</ul>
CSS
ul {
width: 200px;
}
.list {
list-style-type: none;
}
.list li{
list-style-type: none;
position: relative;
padding-left: 5px;
}
.list li:before{
content: ' ';
display: block;
width: 10px;
height: 10px;
background: #eee;
border: solid 1px #aaa;
position: absolute;
top: 3px;
left: -15px;
}
Screenshot
Author by
Wordpressor
Updated on June 04, 2022Comments
-
Wordpressor almost 2 years
I'm trying to create my own custom HTML list bullets, unfortunately I'm having hard time aligning text, any tips?
I can't change the markup, the bullets have to be inside of the anchor tags:
<li> <a href="#"> <div class="bullet"></div> Text </a> </li>
Here's a screen with my custom bullets and standard ones:
And JSFiddle: http://jsfiddle.net/XSUYE/