Question

我希望page:after中放置的内容位于page下方。我使用了负 z-index ，但没有改变。在下面的 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>

Answer 1

您可以将顶部更改为top: 1.5em;

＆＃13;

.pages {
  width: 100%;
}
.page {
  display: inline-block;
  width: 30%;
  text-align: center;
  position: relative;
  font-size: 30px;
  margin-bottom: 10px;
}
.page:after {
  content: '';
  width: 100%;
  height: 2px;
  background: black;
  position: absolute;
  top: 1.5em;
  left: -50%;
}
.page:first-child:after {
  content: none;
}

＆＃13;

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<div>
  <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>
</div>

＆＃13;

Answer 2

不要将: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;
  }

段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

i {background: white;}

这解决了问题

将内容放在其父元素下面

3 个答案:

段