html - 在悬停项上使用 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

将 position:relative 赋给 .sidebar-menu > li 类。

.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>