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/bodyfarmer/13q91433/1/

Css:

ul {
/*  list-style-position: outside; */    
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 30px;
    list-style: none; 
}

li:before {
    content: "\00BB";
    padding-right: 0.5em;
}

HTML:

<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>

回答1:

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>

回答2:

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

回答3:

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

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

来源：https://stackoverflow.com/questions/30465257/custom-ul-bullet-with-pseudo-selector-and-alignment

标签

html

css

pseudo-element