Ul and LI items before and after all aligned orizontally

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.

Answer 2

You need to set position: relative of the parent, the ul, and position: relative of the before / after pseudo elements.

ul {
  list-style: none;
  position: relative;
}

ul li {
  padding-left: 20px;
  padding-right: 20px;
}
ul li:after {
  content: "\25BC \0020";
  position: absolute;
  right: 5px;
}

ul li:before {
  position: absolute;
  left: 5px;
  content: "\25A0 \0020"; color:#C60;
}

JS Fiddle: http://jsfiddle.net/QgBvb/