CODEWITHSUNDEEP
htmlcss
lch
lch

Reputation: 4951

Place after content below its parent element

I want the content placed in page:after to go underneath the page. I used negative z-index, but nothing changed. In the below plunker, the lines between the icons should go below each icon. Could someone help me?

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>

Upvotes: 2

Views: 76

Answers (3)

zer00ne
zer00ne

Reputation: 44088

Instead of placing :after on .page, place it on .fa (the icons).

Changes:

 .page {
    left: 2px;
  }

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

SNIPPET

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

Upvotes: 1

lch
lch

Reputation: 4951

i {background: white;}

this solved the problem

Upvotes: -1

Kld
Kld

Reputation: 7068

You can change the top to top: 1.5em;

.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;
}
<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="[email protected]" 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>

Upvotes: 1

Related Questions