无法为汉堡菜单添加后两行

Question

我正在尝试使用从 Youtube 获得的一些代码制作汉堡包菜单。

一切正常，但我无法为汉堡菜单添加后两行。

我使用了伪元素，但它们不起作用，只有一行。

: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

如果您检查 Firefox 中的代码，您就会明白原因。

所以只需将 display: inline-block 添加到 .hamburger。

您还需要将伪元素的 position: relative 更改为 position: absolute。

: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

你应该有三个 <span class="hamburger"></span> 并且在风格上稍作改变

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

无法为汉堡菜单添加后两行

Can't add the second two lines for hamburger menu

html

css

hamburger-menu