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>

Answer 2

您的li's需要position: relative。

Answer 3

您可以尝试此Demo

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

我在a

中添加了li标记

用悬停项目上的CSS扩展背景

3 个答案: