Strange filter: brightness() Behavior with Pseudo Elements

HTML

<div class="checkbox-wrapper"></div>

SCSS

html {
  font-size: 62.5%;
}
body {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.button {
  background: #fff;
  border: 1px solid transparent;
  border-color: #ccc;
  border-radius: .4rem;
  color: #555;
  cursor: pointer;
  display: inline-block;
  /* toggle the line below and hover over the buttons and pseudo elements to see the strange behavior.*/
  /* filter: brightness(1); */
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.42857143;
  margin-bottom: .5rem;
  padding: .6rem 1.2rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  &:hover {
    filter: brightness(.9);
  }
  &:active {
    filter: brightness(.9);
    box-shadow: inset 0 .3rem .5rem rgba(0,0,0,.125);
  }
}
.checkbox {
  text-align: center;
  .button {
    width: 25%;
  }
  input {
    display: none;
    &:checked + label {
      color: #fff;
      background: #2A81BA;
      border-color: #206390;
      &::after {
        border: solid rgb(255, 0, 0);
        border-width: 0 .4rem .4rem 0;
        content: '';
        top: 0;
        right: 1rem;
        height: 2rem;
        width: 1rem;
        position: absolute;
        transform: rotate(45deg);
      }
    }
  }
}

JavaScript

// don't worry about the JS, it's just here to generate the HTML
const arr = [['teacher', false], ['period', false], ['letter Grade', true], ['percent', true], ['teacher Override Grade', true], ['grade Weighting', false], ['assignment Types', false], ['assignments', false]]
document.querySelector('.checkbox-wrapper').innerHTML = arr.map(o => {
  oJoin = o[0].split(' ').join('');
  return `<div class="checkbox"><input type="checkbox" id="class-${oJoin}" value="${oJoin}" ${o[1] ? 'checked' : ''}>
    <label for="class-${oJoin}" class="button">${o[0].slice(0,1).toUpperCase()}${o[0].slice(1)}</label></div>`;
}).join('');