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>元素，因此您需要在<span>内使用其他html元素，例如<li>并应用

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：之前

<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

更新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/

Answer 4

在Firefox，Chrome和Opera中，您可以将display: inline-block添加到li:before（fiddle）。

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中不起作用。

为李设置风格：之前

4 个答案: