更改选中复选框上的 CSS 内容

Question

我有这个标题，里面有一个菜单。当选中复选框时，我可以打开菜单，但我不知道如何解决我希望 CSS 内容从汉堡菜单更改为关闭图标的问题。为此，我使用 ASCII。

所以这段代码是错误的，我知道它是错误的选择器，但我不知道如何修复它。我想结构中有一些需要改变的地方。如有任何帮助，我们将不胜感激！

.main-nav {
  position: relative;
  nav {
    a {
      display: block;
      border-bottom: 0.5px solid #000;
      padding: 1rem;
      text-decoration: none;
      color: #000;
      &:hover {
        background-color: #F7CC00;
      }
    }
  }
  label {
    cursor: pointer;
    font-size: 1.5rem;
    padding-right: 1rem;
    &:before {
      content: "\2630";
    }
  }
  #toggle {
    display: none;
    &:checked {
      +.menu {
        display: block;
      }
    }
  }
  .menu {
    display: none;
    position: absolute;
    top: 62px;
    right: 0;
    background-color: #fff;
    width: 100vw;
  }
}


/* This is where it goes wrong */

#toggle:checked~label:before {
  content: "\2716";
}

<header>
  <div class="container">
    <div class="logo">
      <a href="/"><img src="https://via.placeholder.com/40" alt="logo"></a>
    </div>
    
    <div class="main-nav">
      <label for="toggle"></label>
      <input type="checkbox" id="toggle" />
      
      <nav class="menu">
        <a href="#one" id="link1">Link</a>
        <a href="#two" id="link2">Link</a>
        <a href="#three" id="link3">Link</a>
        <a href="#four" id="link4">Link</a>
        <a href="#five" id="link5">Link</a>
        <a href="#six" id="link6">Link</a>
        <a href="#seven" id="link7">Link</a>
      </nav>
    </div>
  </div>
</header>

Answer 1

只需颠倒复选框和标签的顺序，这样您的同级选择器就可以工作。请注意，我还更新了菜单元素的选择器。

.main-nav {
  position: relative;
  nav {
    a {
      display: block;
      border-bottom: 0.5px solid #000;
      padding: 1rem;
      text-decoration: none;
      color: #000;
      &:hover {
        background-color: #F7CC00;
      }
    }
  }
  label {
    cursor: pointer;
    font-size: 1.5rem;
    padding-right: 1rem;
    &::before {
      content: "\2630";
    }
  }
  #toggle {
    display: none;
    &:checked {
      ~.menu {
        display: block;
      }
    }
  }
  .menu {
    display: none;
    position: absolute;
    top: 62px;
    right: 0;
    background-color: #fff;
    width: 100vw;
  }
}


/* This is where it goes wrong */

#toggle:checked~label::before {
  content: "\2716";
}

<header>
  <div class="container">
    <div class="logo">
      <a href="/"><img src="https://via.placeholder.com/40" alt="logo"></a>
    </div>
    
    <div class="main-nav">
      <input type="checkbox" id="toggle" />
      <label for="toggle"></label>
      
      <nav class="menu">
        <a href="#one" id="link1">Link</a>
        <a href="#two" id="link2">Link</a>
        <a href="#three" id="link3">Link</a>
        <a href="#four" id="link4">Link</a>
        <a href="#five" id="link5">Link</a>
        <a href="#six" id="link6">Link</a>
        <a href="#seven" id="link7">Link</a>
      </nav>
    </div>
  </div>
</header>