Skip to main content

How to exclude some of the multiple pseudo-element selectors?

.component .element::beforeThe element you want to styleThe selector you want to keepThe selector you want to omit,
 .component .element::after
+component('.component')
  +register
    +pseudo-element('{both}', 'before', 'after')

  display: flex

  +________________________
  +pseudo-element('{both}')
    +default
      display: inline-flex

    +only-for('::before')
      background: red

    +only-for('::after')
      background: green





.component {
  display: flex;
}

.component::before, .component::after {
  display: inline-flex;
}
.component::before {
  background: red;
}
.component::after {
  background: green;
}

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