Custom Ul Bullet With Pseudo-selector And Alignment

I made a custom bullet for ul with pseudo-selector. But I want the link text position to be align inside. How do I do that? Here's the link to the Fiddle http://jsfiddle.net/bodyfa

Solution 1:

I think that is better make this with position absolute in :before. That way:

li{
    position: relative;
}

li:before {
    position: absolute;
    left: -20px;
    content: "\00BB";
    padding-right: 0.5em;
}

FIDDLE

Solution 2:

You could do it as the follows, and adjust -1em if necessary.

http://jsfiddle.net/dyd9topy/

ul {  
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 30px;
    list-style: none; 
}
li:before {
    content: "\00BB";
    display: inline-block;
    text-indent: -1em;
}

<ul><li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li><li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li></ul>

Solution 3:

The first answer works, although a slightly different alternative is:

li:before {
  content: "\00BB";
  position: absolute;
  left: 10px;
}