Question

Our web designer wants a vertical UL / LI list like the following image.

But using this style I obtained

the stye was the following

    <style type="text/css">
ul {
    list-style: none;

}
ul li:after {
    content: "\25BC \0020";
}

ul li:before {
    content: "\25A0 \0020"; color:#C60;
}
</style>

Im going to pass to a table but is there a way to obtain an aligned list also if the line owerflows ?

Answer 1

This jsfiddle works pretty nice, note that the li left-margin and text-indent depend on the icon used, but like this they keep their alignment even with changing font-sizes.

CSS

ul {
    list-style: none;
    width: 150px;
    font-size: 16px;
    text-transform: uppercase;
}

ul li {
    text-indent: -0.88em;
    margin-left: 0.88em;
    position: relative;
    padding-right: 1em;
}

ul li:before {
    content: "\25A0";
    color: #C60;
    vertical-align: text-bottom;
    margin-right: .25em;
}

ul li:after {
    color: #C60;
    font-size: 0.8em;
    content: "\25BC";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -.5em;
}

Edit: vertical-align: text-bottom; results in a better icon-to-text alignment in FF for me.