CODEWITHSUNDEEP
htmlcss
Adam McGurk
Adam McGurk

Reputation: 476

::before and ::after pseudo element issues

I'm trying to do something that I think is really simple, even with my cursory understanding of ::before and ::after

.menu-icon {
  display: flex;
  width: 40px;
  height: 35px;
  border: 1px solid black;
  justify-content: center;
}
.menu-icon span {
  background-color: black;
  width: 35px;
  height: 5px;
  margin-top: 6px;
}
.menu-icon span::before {
  content: "";
  width: 35px;
  height: 5px;
  background-color: black;
}
.menu-icon span::after {
  content: "";
  width: 35px;
  height: 5px;
  background-color: black;
}
<div class="menu-icon">
        <span></span>
</div>

. I'm just trying to create a simple three bar hamburger menu with one div and one span and for some reason, I can only get one bar to show up and that is the bar that is in the original span element. With my understanding of ::before and ::after they should be able to make those bars as well. Am I wrong? And if I'm not, what part of my code is not making the bars show up in the pseudo elements?

Upvotes: 0

Views: 938

Answers (2)

Nisarg Shah
Nisarg Shah

Reputation: 14531

As an alternative to your current approach, you could even use box-shadow property two create the two bars at bottom.

I have added two shadows below the original one, at the separation of 9px from each other.

.menu-icon {
  display: flex;
  width: 40px;
  height: 35px;
  border: 1px solid black;
  justify-content: center;
}
.menu-icon span {
  background-color: black;
  width: 35px;
  height: 5px;
  margin-top: 6px;
  box-shadow: 0 9px currentColor, 0 18px currentColor;
}
<div class="menu-icon">
    <span></span>
</div>

Upvotes: 2

j08691
j08691

Reputation: 207861

You need to set a few extra properties like the display and margin to space the before/after content out.

.menu-icon {
  display: flex;
  width: 40px;
  height: 35px;
  border: 1px solid black;
  justify-content: center;
}
.menu-icon span {
  background-color: black;
  width: 35px;
  height: 5px;
  margin-top: 6px;
}
.menu-icon span::before {
  content: "";
  width: 35px;
  height: 5px;
  background-color: black;
  display:block;
  margin: 10px 0;
}
.menu-icon span::after {
  content: "";
  width: 35px;
  height: 5px;
  background-color: black;  display:block;
  margin: -5px 0;
}
<div class="menu-icon">
        <span></span>
</div>

Upvotes: 2

Related Questions