CODEWITHSUNDEEP
htmlcsscss-positioncenterabsolute
Kamil Paciepnik
Kamil Paciepnik

Reputation: 35

Position absolute after center under div

i have problem with after position absolute. I can't centering content after div. My code:enter link description here

I checked other post but unfortunately they did not help me.

.nav {
  height: 20px;
}
.w {
  border: 1px solid red;
  color: red;
  display: inline-block;
  padding: 15px;
  height: 20px;
}
.e:after {
  content: "W";
  display: block;
  position: absolute;
  line-height: 0;
  margin: 0 auto;
  bottom: 350px;
  border: 1px solid blue;
  height: 20px;
  width: 20px;
  text-align: center;
}
<nav class="nav">
  <ul class="q">
    <li class="w">
      <a href="" class="e">Testttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Testtttttttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Testttttttttttttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Test</a>
    </li>
  </ul>
</nav>

Upvotes: 0

Views: 66

Answers (2)

Aryan Twanju
Aryan Twanju

Reputation: 2516

I believe you are tying to center the :after pseudo element. You can't center an element with text-align:center after you assign position:absolute to it. You have to use left,right position along with negative margin. Try this code.

.e{
  position: relative;
}
.e:after {
  content: "W";
  display: block;
  position: absolute;
  line-height: 0;
  bottom: -50px;
  border: 1px solid blue;
  height: 20px;
  width: 20px;
  left: 50%;
  margin-left: -10px;
}

Upvotes: 1

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4281

Simply add text-align: center; to nav class in css

.nav {
  height: 20px;
  text-align: center;
}

.w {
  border: 1px solid red;
  color: red;
  display: inline-block;
  padding: 15px;
  height: 20px;
}

.e:after {
  content: "W";
  display: block;
  position: absolute;
  line-height: 0;
  margin: 0 auto;
  bottom: 350px;
  border: 1px solid blue;
  height: 20px;
  width: 20px;
  text-align: center;
}
<nav class="nav">
  <ul class="q">
    <li class="w">
      <a href="" class="e">Testttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Testtttttttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Testttttttttttttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Test</a>
    </li>
  </ul>
</nav>

Upvotes: 0

Related Questions