Как скрыть :after для второго класса через :not()?

Question

[Капитан Какао]

Всем привет, есть 2 блока с разными классами, но их стили одинаковые.
Различие лишь в том, что у блока с классом first должно отображаться оба псевдо элемента :before и :after
А у блока с классом second необходимо скрывать :after.

Конечно можно дописать пару строк кода, как в примере и на этом закрыть вопрос.
Пример кода: https://jsfiddle.net/v2cgxuyz/

Но я бы хотел избавиться от строки которая перечёркнута на скрине, и решить вопрос более лаконично через :not()
Можно ли как-то скрыть :after для класса .second таким способом или нет? Я чёт не могу понять.

Comments

[Сергей delphinpro]

НЕ ВЫКЛАДЫВАЙ КОД КАРТИНКАМИ !!!!!!!!!!!!!

[Капитан Какао]

Сергей delphinpro, Я выложил код кодом, ЕСЛИ ТЫ НЕ ЗАМЕТИЛ!!!! ;)
А на картинке перечеркнул то, от чего хотел бы избавиться.

Answer 1

[Сергей delphinpro]

И не надо страдать фигней

.first,
.second {
  &::before {}
}

.first {
  &::after {}
}

Если очень хочется, можно так

.first,
.second {
  &::before {}
  
  @at-root {
    .first {
      &::after {}
    }
  }
}

Comments

[Капитан Какао]

Не совсем то что хотел. Хотелось понять можно ли это сделать именно через :not().
Если нет, тогда прибегну к такому варианту, тоже вполне хороший. Спасибо

.first,
.second {
  &::before {}
}

.first {
  &::after {}
}

[Сергей delphinpro]

Капитан Какао, ну вы можете написать

.first,
.second {
  &::before {}
  &:not(.second)::after {}
}

Но
1. лишнее правило будет .second:not(.second)::after {} которое никогда не применится.
2. у блока <div class="first second"> не будет псевдо элемента ::after