汉堡菜单，如何改变十字架的颜色

Question

我应该怎么做因为我有问题。 这个菜单上的X按钮有问题我自己做了，一切都正确但是当我尝试改变X的颜色时出现错误。 我想将X的颜色改为黑色。 Theres a code

<button class="js-menu menu" type="button">
    <span class="bar"></span>
</button>

<nav>
    <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>       
    </ul>
</nav>

Answer 1

更改课程.active:after .active:before

的背景

.active & {
  background: none;
  &:after,
  &:before{
     background: red;
  }

http://codepen.io/pranesh-r/pen/gwkNwY

Answer 2

您可以使用.active类

更改颜色

.active & {
    background: none;
    &:before,
    &:after {
       top: 0;
       background:red
    }
}

Answer 3

将background color添加到CSS中的psuedo选择器中。将以下内容添加到您的代码中

.active .bar::before, .active .bar::after {
    top: 0;
    background: #000;
}