设置 li:before的样式

Question

我正在将带有:before CSS 选择器的字符添加到列表中

li:before {
    content: "■";
    font-size: 10px;
    margin-left: -14px;
    padding-right: 8px;
    text-decoration: none !important;
    vertical-align: 20%;
}

我想为列表项的内容添加下划线，但不对之前的内容下划线，所以我添加了：

li {
    cursor: pointer;
    text-decoration: underline;
}

但是，即使:before text-decoration部分设置为none，部分仍带有下划线。

如何为列表文本添加下划线，但不为前部分添加下划线？

JSFIDDLE 在这里： http://jsfiddle.net/fX86Q/

旁注：我的目标不是向 html 中添加任何内容并找到仅 CSS 的解决方案。这就是为什么我没有选择@mahatmanich（明显的）解决方案

Answer 1

由于li样式始终适用于整个<li>元素，因此您需要使用另一个html元素，例如<li>内的<span>并应用

.HTML：

<ul class="list">
    <li><span>Test</span></li>
    <li><span>Test</span></li>
</ul>

.CSS：

li:before  {
    content: "■";
    font-size: 10px;
    margin-left: -14px;
    padding-right: 8px;
    vertical-align: 20%;
}
li span {
    cursor: pointer;
    text-decoration: underline;
}
ol, ul {
    list-style: none outside none;
}

更新：

没有课就更好了：http://jsfiddle.net/fX86Q/8/

Answer 2

如果你正在设置列表项目符号的方式，你可以这样做而不是 li：before

<ul>
    <li>item 1</li>
    <li>item 2 </li>
</ul>
ul {list-style-type: square;}
li {
    cursor: pointer;
    text-decoration: underline;
}

希望这也有帮助！ jsFiddle 链接 http://jsfiddle.net/xWwXq/

Answer 3

在Firefox，chrome和opera中，您可以将display: inline-block添加到li:before（小提琴）。

li:before {
    content: "■";
    display: inline-block;
    font-size: 10px;
    margin-left: -14px;
    padding-right: 8px;
    text-decoration: none !important; /* this should no longer be necessary */
    vertical-align: 20%;
}

不过，这在IE中不起作用。

Answer 4

更新 li：在 CSS 部分之前

li:before {
    display: inline-block;
    content: "■";
    font-size: 10px;
    margin-left: -14px;
    padding-right: 8px;
    text-decoration: none !important;
    vertical-align: 20%;
}

这将解决您的问题。 jsFiddle 链接 http://jsfiddle.net/SqkjF/