How to declare a element selector variant on pseudo-element?

.component buttonThe selector you want to insert.element::afterThe element you want to style

Option 1

SASS

+component('.btn')
  +register
    +element('.btn-inner')
      +variant('button')
      +pseudo-element('after')

  display: inline-block

  +________________________
  +element('.btn-inner')
    display: inline-flex

    +________________________
    +pseudo-element('after')
      +default
        background: grey

      +variant('button')
        background: red

CSS

.btn {
  display: inline-block;
}

.btn .btn-inner {
  display: inline-flex;
}

.btn .btn-inner::after {
  background: grey;
}

.btn button.btn-inner::after {
  background: red;
}

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

Option 2 - via alias and multiple elements

SASS

+component('.btn')
  +register
    +element('.btn-inner')
      +variant('{clickable}', 'a', 'button', 'input')
      +pseudo-element('after')

  display: inline-block

  +________________________
  +element('.btn-inner')
    display: inline-flex

    +________________________
    +pseudo-element('after')
      +default
        background: grey

      +variant('{clickable}')
        background: red

CSS

.btn {
  display: inline-block;
}

.btn .btn-inner {
  display: inline-flex;
}

.btn .btn-inner::after {
  background: grey;
}

.btn a.btn-inner::after, .btn button.btn-inner::after, .btn input.btn-inner::after {
  background: red;
}

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