html -::之前和不可见的背景图像

Question

我想要一个带有左右图像的导航作为悬停效果(参见图片 navigation)。

我有这个代码:

HTML

<nav class="clearfix"> 
<ul class="clearfix">
<li><a href="#about">about</a></li>
<li><a href="#get_involved">get involved</a></li>
<li><a href="#kenia2016">kenia 2016</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>

CSS:

nav a:hover::before {
    content: "____";
    background: url('../img/mosterdseed_left.png') no-repeat;
    width: 200px;
    height: 200px;
}

当我删除 CSS 中的内容属性时，图像变得不可见。我怎样才能避免这种情况？

Answer 1

只写content: "";

然后您将拥有“空”内容。::before 和::after 伪元素需要添加 content 属性才能可见，但允许为空字符串。

但默认情况下::before和::after是行内元素，它们会忽略宽度和高度。一旦你绝对定位它们，它就会起作用。

下面是一个片段，显示了您需要添加什么才能使其正常工作。

nav a {
    /* To be able to absolutely possition the pseudo elements inside the link. */
    position: relative;
}

nav a:hover::before {
    background: url('../img/mosterdseed_left.png') no-repeat;
    width: 200px;
    height: 200px;
    
    /* To make the pseudo element visible in the first place. */
    content: "";

    /* To position the image */
    position: absolute;
    left: 0;
    top: 0;
  
    /* To make it visible, since the image cannot be loaded in the example */
    background-color: rgba(255, 0, 0, 0.3);
}

<nav class="clearfix"> 
<ul class="clearfix">
<li><a href="#about">about</a></li>
<li><a href="#get_involved">get involved</a></li>
<li><a href="#kenia2016">kenia 2016</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>