在悬停项上使用 CSS 扩展背景

Question

我正在我的网站上写作，但我遇到了以下代码的一些问题（codepen 上的完整代码）：

<section class="sidebar">
    <ul class="sidebar-menu clearfix">
      <li class="sidebar-menu-item">HOME</li>
      <li class="sidebar-menu-item">PORTFOLIO</li>
      <li class="sidebar-menu-item">BLOG</li>
      <li class="sidebar-menu-item">ABOUT ME</li>
      <li class="sidebar-menu-item">CONTACT</li>
    </ul>
</section>

https://codepen.io/anon/pen/pdErVq

如您所见，所有 :after 元素都在第一行对齐。

如何在适当的 <li> 标签中扩展元素？

Answer 1

您的 li's 需要 position: relative.

Answer 2

将 position:relative 交给 .sidebar-menu > li class。

.sidebar {
  position: fixed;
  background-color: #333;
  opacity: 0.75;
  width: 300px;
  height: 100%;
  left: -0px;
  top: 0;
}
.sidebar-menu {
  position: relative;
  top: 100px;
  padding-left: 20px;
}
.sidebar-menu > li {
  color: #fff;
  margin-right: 10px;
  list-style: none;
  font-size: 25px;
  font-style: italic;
  padding: 10px 5px;
  cursor: pointer;
  -webkit-transition: all 0.5s;
   transition: all 0.5s;
   position:relative;
}
.sidebar > ul > li:after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  right: 0;
  background-color: rgba(250,250,250,0.5);
  width: 0;
  height: 37px;
  -webkit-transition: all 0.5s;
   transition: all 0.5s;
}
.sidebar-menu > li:hover:after {
  width: 280px;
}

<section class="sidebar">
    <ul class="sidebar-menu clearfix">
      <li class="sidebar-menu-item">HOME</li>
      <li class="sidebar-menu-item">PORTFOLIO</li>
      <li class="sidebar-menu-item">BLOG</li>
      <li class="sidebar-menu-item">ABOUT ME</li>
      <li class="sidebar-menu-item">CONTACT</li>
    </ul>
  </section>

Answer 3

你可以试试这个Demo

li{position:relative} li a{position:absolute;}

我在li

中添加了a标签

在悬停项上使用 CSS 扩展背景

Expanded background with CSS on Hover item

html

css

expand

background

hover