Объединение блоков объявлений

Question

Я пытаюсь найти способ повышения резкости изображения с помощью CSS, и я обнаружил этот пример.

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
 }

 &::before,
 &::after {
   content: '';
   background: url('https://source.unsplash.com/iI72r3gSwWY/750') no-repeat;
 }

 &::after {
   filter: invert(1);
   opacity: 0.5;
   top: -1px; left: -1px;
 }
}

В таблице стилей CSS есть три :before и :after псевдоэлементов, и я объединил их в один, как этот, если это приводит к тому же эффекту изображения:

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   content: '';
   background: url('https://source.unsplash.com/iI72r3gSwWY/750') no-repeat;
   filter: invert(1);
   opacity: 0.5;
   top: -1px; left: -1px;
 }

Однако, он не создает тот же эффект изображения, что и исходный.у меня вопросы

1) Почему для создания эффекта нужны три отдельных селектора :after?

2) Есть ли более простой способ добиться того же эффекта в CSS?

Answer 1

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   /** those rules will be applied to '&' AND '&::before' AND '&::after' */
 }

 &::before,
 &::after {
   /** those rules will be applied to '&::before' AND '&::after' */
 }

 &::after {
   /** those rules will ONLY be applied to '&::after' */
 }
}

1) Требуется 3 отдельных блока, потому что некоторые правила должны применяться только к :: after, тогда как некоторые должны применяться только к :: before и :: after, а некоторые должны применятьсяк элементу, :: after и :: before

2) Из моего понимания проблемы это самый простой способ достижения этого конкретного эффекта.Если не самый простой, то он действительно простой.