Checkbox选中时无法旋转label的::before背景图问题求助

我使用::before伪元素替换了checkbox的默认样式，以此实现div的展开与收起功能，该功能运行正常。但我希望在checkbox被选中时旋转该伪元素的背景图，此效果无法实现。

我尝试在CSS中添加以下代码实现旋转：

.filter-buttons #box:checked ~ .filter-checkbox::before {
  transform: rotate(180deg);
}

相关HTML代码 #

<div class="filter-buttons">
  <div class="filter-dropdown">
      <form action="/form/submit" method="post">
        <a href="/blog/" title="All Blog Categories"><button class="filter-dropbtn">All Categories</button></a>
        <label for="box" class="filter-checkbox"></label>
        <input type="checkbox" id="box" />
        <ul class="filter-content">

            <li><a href="#">some content</a></li>
         <li><a href="#">more content</a></li>
          
        </ul>
      </form>
    </div>
   </div>

相关CSS代码 #

.filter-buttons {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .filter-buttons {
    margin-top: 50px;
  }
}
.filter-buttons .filter-dropbtn {
  background: #e0e1e1 0% 0% no-repeat padding-box;
  border-radius: 25px;
  color: #2130b2;
  font: normal normal normal 20px/24px Gibson;
  letter-spacing: 0;
  padding-left: 25px;
  text-align: left;
  width: 275px;
}
@media (min-width: 768px) {
  .filter-buttons .filter-dropbtn {
    width: 325px;
  }
}
.filter-buttons .filter-dropdown {
  display: inline-block;
  position: relative;
}
.filter-buttons .filter-dropdown form .filter-checkbox::before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMyMTMwQjI7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8ZyBpZD0iTGF5ZXJfMiI+Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNSIgY3k9IjI1IiByPSIyNC45Ii8+CjwvZz4KPGcgaWQ9IkxheWVyXzEiPgoJPGcgaWQ9ImFycm93X2RvdWJsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIpIHJvdGF0ZSg5MCkiPgoJCTxwYXRoIGlkPSJQYXRoXzE1NyIgY2xhc3M9InN0MSIgZD0iTTI2LjMtN2wtMS43LTEuN2w0LjMtNC4zbC00LjMtNC4zbDEuNy0xLjdsNiw2TDI2LjMtN3oiLz4KCQk8cGF0aCBpZD0iUGF0aF8xNTgiIGNsYXNzPSJzdDEiIGQ9Ik0xOS40LTdsLTEuNy0xLjdMMjItMTNsLTQuMy00LjNsMS43LTEuN2w2LDZMMTkuNC03eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=);
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 44px;
  position: absolute;
  right: 20px;
  width: 44px;
}
.filter-buttons .filter-dropdown form input {
  visibility: hidden;
}
.filter-buttons .filter-content {
  background: #f0f0f0 0% 0% no-repeat padding-box;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16078);
  display: none;
  list-style: none;
  margin-top: 0;
  padding: 0 10px 15px;
  position: absolute;
  width: 275px;
  z-index: 100;
}
@media (min-width: 768px) {
  .filter-buttons .filter-content {
    width: 325px;
  }
}
.filter-buttons .filter-content li::before {
  content: "";
  list-style: none;
}
.filter-buttons .filter-content li {
  border-bottom: 1px solid #2130b2;
  list-style: none;
}
.filter-buttons .filter-content li a[href]:not(.button) {
  color: #333;
  letter-spacing: 0;
  text-decoration: none;
}
.filter-buttons .filter-content li a[href]:not(.button):hover {
  color: #2130b2;
}
.filter-buttons .filter-content li .parent {
  font: normal normal 600 20px/34px Gibson;
  margin-left: 5px;
}
.filter-buttons .filter-content li .child {
  font: normal normal normal 20px/34px Gibson;
  margin-left: 20px;
}
.filter-buttons #box:checked + .filter-content {
  display: block;
}
.filter-buttons #box:checked ~ .filter-checkbox::before {
  transform: rotate(180deg);
}

内容的提问来源于stack exchange，提问作者Justin Blayney