html - 与 li:before 上的伪元素组合时不显示文本

Question

我有一个使用<li>. 示例代码如下：

HTML：

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
</ul>

CSS：

li{
    width:190px;
    height:40px;
    padding:3px 10px 3px 50px;  
    border-bottom:1px dotted #003366;
    cursor:pointer;
    line-height:40px;
    background-color: #FFFFFF;
    list-style:none;
    font-weight:bold;                       
    position:relative;
}

li:before{
    content:'';
    position:absolute;
    width:195px;
    height:38px;
    left:50px;
    top:3px;
    background-color: #F9F9F9;
    border:1px solid #CFCFCF;
}

不使用样式li:before时，文本<li>将可见（即“菜单 1”、“菜单 2”），但使用此伪类li:before时，它会消失。

Answer 1

首先，这些是伪元素，而不是 伪类。

那是因为你的定位。

你的li元素有 50px 的左内边距和 3px 的上边距。

你的li:before伪元素有一个 50px 的左偏移和一个 3px 的顶部偏移。

这意味着您的li:before伪元素直接位于您的li.

然后你给它一个纯色的背景颜色，有效地隐藏它下面的任何东西。

这是一个使用p元素和p:before伪元素更清楚地展示这一点的演示。我已经给伪元素一些不透明度以显示它是如何覆盖p元素的。