CODEWITHSUNDEEP
htmllistword-wrap
Wordpressor
Wordpressor

Reputation: 7543

Custom HTML list bullets & text wrapping / aligning

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:

lists

And JSFiddle: http://jsfiddle.net/XSUYE/

Upvotes: 4

Views: 18482

Answers (2)

doctororange
doctororange

Reputation: 11810

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

Screenshot

Upvotes: 3

Jack
Jack

Reputation: 1911

Can you put span tags around the plain text? That way you have far more control, while the bullets still remain inside the anchor tags:

enter image description here

See here: http://jsfiddle.net/vzCpp/1/

ul {
    width: 200px;
    font-family: Arial;
    line-height: 1.5em;
}

.list {
    list-style-type: none;
    margin: 0 !important;
    padding: 10px !important;
}

.list a {
    vertical-align: top;
}

.bullet {
    width: 10px;
    height: 10px;
    background: #eee;
    border: solid 1px #aaa;
    display: inline-block;
    margin-right: -12px;
}

.list a span:last-child {
    display: inline-block;
    margin-left: 24px;
    vertical-align: top;
}

Upvotes: 1

Related Questions