How to declare a state on pseudo-element?

.component .element:activeThe selector you want to insert::beforeThe element you want to style

SASS

+component('.btn')
  +register
    +element('.icon')
      +state(':active')
      +pseudo-element('before')

  display: inline-flex

  +___________________
  +element('.icon')
    position: relative

    +_________________________
    +pseudo-element('before')
      +default
        background-color: grey

      +state(':active')
        background-color: red

CSS

.btn {
  display: inline-flex;
}

.btn .icon {
  position: relative
}

.btn .icon::before {
  background-color: grey;
}

.btn .icon:active::before {
  background-color: red;
}

More info: +state, +default, +pseudo-element, +element, +register, +component, separator +___