How to declare a pseudo-element on sub-element?

.component .element::beforeThe selector you want to insertThe element you want to style

Option 1

SASS

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

  display: inline-flex
  background-color: grey

  +__________________________
  +element('.icon')
    display: inline-block

    +__________________________
    +pseudo-element('before')
      content: ''

CSS

.btn {
  display: inline-flex;
  background-color: grey;
}

.btn .icon {
  display: inline-block;
}

.btn .icon::before {
  content: '';
}

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

Option 2 - with alias

SASS

+component('.btn')
  +register
    +element('.icon')
      +pseudo-element('{symbol}', 'before')

  display: inline-flex
  background-color: grey

  +__________________________
  +element('.icon')
    display: inline-block

    +__________________________
    +pseudo-element('{symbol}')
      content: ''

CSS

.btn {
  display: inline-flex;
  background-color: grey;
}

.btn .icon {
  display: inline-block;
}

.btn .icon::before {
  content: '';
}

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