1

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

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（明显）解决方案的原因

4

4 回答 4

4

由于li样式始终适用于整个<li>元素，因此您需要在<span>内部使用另一个 html 元素，如 a<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/

于 2013-09-25T13:40:04.240 回答
1

如果你正在设计列表项目符号的方式，你可以用这个而不是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/

于 2013-09-25T13:57:24.130 回答
0

更新 li:before 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/

于 2013-09-25T13:49:48.410 回答
0

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

于 2013-09-25T14:05:18.637 回答