html - 在其父元素下方的内容之后放置

我希望page:after中的内容位于page下面。我用的是负z指数，但没什么变化。在下图中，图标之间的线应该位于每个图标的下方。有人能帮我吗？
Plunker

body{
  margin-top: 50px;
}
.pages{
  width: 100%;
}
.page{
  display: inline-block;
  width: 30%;
  text-align: center;
  position:relative;
  font-size: 30px;
}
.page:after{
  content: '';
  width: 100%;
  height: 2px;
  background: #000;
  position:absolute;
  top:50%;
  left: -50%;
  z-index:-1;
}
.page:first-child:after{
  content: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<ul class="pages">
  <li class="page">
    <i class="fa fa-home"></i>
  </li>
  <li class="page">
    <i class="fa fa-user"></i>
  </li>
  <li class="page">
    <i class="fa fa-bullseye"></i>
  </li>
</ul>

最佳答案

不要将:after置于.page上，而是将其置于.fa（图标）。
变化：

 .page {
    left: 2px;
  }

  .fa:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    display: inline;
    top: 50%;
    left: -50%;
    z-index: -1;
  }

片段

.pages {
  width: 100%;
}
.page {
  display: inline-block;
  width: 30%;
  text-align: center;
  position: relative;
  font-size: 30px;
  left: 2px;
}
.fa:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  display: inline;
  top: 50%;
  left: -50%;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<ul class="pages">
  <li class="page">
    <i class="fa fa-home"></i>
  </li>
  <li class="page">
    <i class="fa fa-user"></i>
  </li>
  <li class="page">
    <i class="fa fa-bullseye"></i>
  </li>
</ul>

关于html - 在其父元素下方的内容之后放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38192281/