Skip to main content

How to declare a context of the pseudo-element?

.context +The selector you want to insert .component .element::beforeThe element you want to style

See example​

.modal +The selector you want to insert .btn .img::beforeThe element you want to style
+component('.btn')
  +register
    +context('.modal +')
    +element('.icon')
      +pseudo-element('before')

  display: inline-block

  +______________________
  +element('.icon')
    display: inline-flex

    +______________________
    +pseudo-element('before')
      +default
        content: ''
        background: grey

      +context('.modal +')
        background: red






.btn {
  display: inline-block;
}

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

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

.modal + .btn .icon::before {
  background: red;
}

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