Can't add the second two lines for hamburger menu

Question

I am trying to make a hamburger menu using some code I got from Youtube.

Everything is working but I can't add the second two lines for the hamburger menu.

I used the pseudo elements but they aren't working, it's only one line.

:root {
  --clr-dark: black;
}

.nav-toggle {
  padding: .5em;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  right: 1em;
}

.hamburger {
  display: block;
  position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  background: var(--clr-dark);
  width: 2em;
  height: 3px;
  border-radius: 2em;
  transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: relative;
  left: 0;
  right: 0;
  color: var(--clr-dark);
}

.hamburger::before {
  top: 6px;
}

.hamburger::after {
  bottom: 6px;
}

<header class="header">
  <div>PORTFOLIO</div>
  <button class="nav-toggle" aria-label="toggle navigation">
        <span class="hamburger"></span>
    </button>
  <nav class="nav">
    <ul class="nav__list">
      <li class="nav__item">
        <a class="nav__link" href="#"></i>Home</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#"></i>My Services</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#"></i>About me</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#"></i>My Work</a>
      </li>
    </ul>
  </nav>
</header>

Answer 1

If you inspect the code in Firefox, you will see why.

So just add display: inline-block to .hamburger.

You also need to change position: relative to position: absolute for your pseudo elements.

:root {
  --clr-dark: black;
}

.nav-toggle {
  padding: .5em;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  right: 1em;
}

.hamburger {
  /* display: block; */
  position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: inline-block; /* ADDED */
  background: var(--clr-dark);
  width: 2em;
  height: 3px;
  border-radius: 2em;
  transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
  content: '';
  /* position: relative; */
  position: absolute; /* ADDED */
  left: 0;
  right: 0;
  color: var(--clr-dark);
}

.hamburger::before {
  top: 6px;
}

.hamburger::after {
  bottom: 6px;
}

<header class="header">
  <div>PORTFOLIO</div>
  <button class="nav-toggle" aria-label="toggle navigation">
        <span class="hamburger"></span>
    </button>
  <nav class="nav">
    <ul class="nav__list">
      <li class="nav__item">
        <a class="nav__link" href="#"></i>Home</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#"></i>My Services</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#"></i>About me</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#"></i>My Work</a>
      </li>
    </ul>
  </nav>
</header>