带有伪选择器和对齐方式的自定义 ul 项目符号

Question

我用伪选择器为 ul 做了一个自定义项目符号。但我希望 link 文本位置在内部对齐。我怎么做？这是 link 到 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: "[=10=]BB";
    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>

Answer 1

您可以按如下方式进行，必要时调整-1em。

http://jsfiddle.net/dyd9topy/

ul {  
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 30px;
    list-style: none; 
}
li:before {
    content: "[=10=]BB";
    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>

Answer 2

我认为最好在 :before 中使用绝对位置。这样：

li{
    position: relative;
}

li:before {
    position: absolute;
    left: -20px;
    content: "[=10=]BB";
    padding-right: 0.5em;
}

FIDDLE

Answer 3

第一个答案有效，但略有不同的替代方案是：

li:before {
  content: "[=10=]BB";
  position: absolute;
  left: 10px;
}

带有伪选择器和对齐方式的自定义 ul 项目符号

Custom ul bullet with pseudo-selector and alignment

html

css

pseudo-element