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

首先，这些是pseudo-elements，不是 pseudo-classes。

这是由于你的定位。

您的li元素有50px左边填充和3px顶部填充。

您的li:before伪元素的左偏移量为50px，顶部偏移量为3px。

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

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

Here's a demo使用p元素和p:before伪元素更清楚地显示了这一点。我给了伪元素一些不透明度，以显示它如何覆盖p元素。

与li上的伪元素组合时不显示文本：之前

1 个答案: