html - 悬停在导航栏上时显示图像

Question

我是 CSS 的新手 .. 我想在导航栏中的每个元素上添加一个条形图，这些元素出现在悬停和选定元素上像这样

这是我的 HTML

<nav>
    <ul>
        <li><a href="/ecomm/public" class="selected">HOME</a></li>
        <li><a href="about" >ABOUT US</a></li>
        <li><a href="portfolio">PORTFOLIO</a></li>
        <li><a href="contact" >CONTACT</a></li>

    </ul>
</nav>

我尝试了这个问题的解决方案 Make image appear on link hover css但是出现过一次

Answer 1

在悬停上使用伪元素

ul {
  list-style: none;
  border-width: 1px 0 1px 0;
  border-style: solid;
  text-align:center;
}
ul li {
  display: inline-block;
}
ul li a {
  display: block;
  padding: 15px;
  color: grey;
  text-decoration: none;
  position: relative;
}
ul li a:hover, ul li a.selected{
  color:red;
}
ul li a.selected:before, ul li a:hover:before {
  content: '';
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: red;
}

<nav>
  <ul>
    <li><a href="/ecomm/public" class="selected">HOME</a></li>
    <li><a href="about">ABOUT US</a></li>
    <li><a href="portfolio">PORTFOLIO</a></li>
    <li><a href="contact">CONTACT</a></li>
  </ul>
</nav>