Can't add the second two lines for hamburger menu - html

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>

Answer 2

You should have three <span class="hamburger"></span> and a little changes on style
:root {
--clr-dark: black;
}
.nav-toggle {
padding: .5em;
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 1em;
}
.hamburger {
margin-bottom:4px;
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>
<span class="hamburger"></span>
<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>