Как убрать последний псевдоэлемент before / after?

Question

[by_ultra]

Добрый день.
Столкнулся с проблемой убрать последний псевседоэлемент.
Пробовал следующие варианты:

.program-week__item-text-mobile :not(:last-child)::after,
.program-week__item-text-mobile + .program-week__item-text-mobile,
.program-week__item-text-mobile:last-child:after{
content: "";
}
.program-week__item-text-mobile:last-child:after{
display: none;
}

Убирает или все псевдоэлементы или вообще никакой.

HTML:

<div class="program-week-mobile-box">
                     <div class="program-week__items-mobile">
                        <div class="program-week__item-title-mobile">
                           <p>Неделя №1</p>
                        </div>
                        <div class="program-week__item-text-mobile">
                           <p>Красивая часть курса,
                              которая помогает в успехе</p>
                        </div>
                     </div>
                     <div class="program-week__items-mobile">
                        <div class="program-week__item-title-mobile">
                           <p>Неделя №2</p>
                        </div>
                        <div class="program-week__item-text-mobile">
                           <p>Красивая часть курса,
                              которая помогает в успехе</p>
                        </div>
                     </div>
                     <div class="program-week__items-mobile">
                        <div class="program-week__item-title-mobile">
                           <p>Неделя №3</p>
                        </div>
                        <div class="program-week__item-text-mobile">
                           <p>Красивая часть курса,
                              которая помогает в успехе</p>
                        </div>
                     </div>
                     <div class="program-week__items-mobile">
                        <div class="program-week__item-title-mobile">
                           <p>Неделя №4</p>
                        </div>
                        <div class="program-week__item-text-mobile">
                           <p>Красивая часть курса,
                              которая помогает в успехе</p>
                        </div>
                     </div>
                     <div class="program-week__items-mobile">
                        <div class="program-week__item-title-mobile">
                           <p>Неделя №5</p>
                        </div>
                        <div class="program-week__item-text-mobile">
                           <p>Красивая часть курса,
                              которая помогает в успехе</p>
                        </div>
                     </div>
                     <div class="program-week__items-mobile">
                        <div class="program-week__item-title-mobile">
                           <p>Неделя №6</p>
                        </div>
                        <div class="program-week__item-text-mobile">
                           <p>Красивая часть курса,
                              которая помогает в успехе</p>
                        </div>
                     </div>
                     <div class="program-week__items-mobile">
                        <div class="program-week__item-title-mobile">
                           <p>Неделя №7</p>
                        </div>
                        <div class="program-week__item-text-mobile">
                           <p>Красивая часть курса,
                              которая помогает в успехе</p>
                        </div>
                     </div>
                  </div>

program-week__item-title-mobile {
   font-size: 14px;
   line-height: 160%;
   opacity: 0.5;
   margin-bottom: 15px;
}

.program-week__item-title-mobile,
.program-week__item-text-mobile {
   text-align: center;
}

.program-week__item-text-mobile {
   position: relative;
   & ::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 30px;
      background: linear-gradient(94.26deg, #c89afc 9.51%, #7c6afa 90.23%);
      top: 40px;
      right: 50%;
   }
}

.program-week__item-text-mobile {
   width: 250px;
   margin: 0 auto;
   padding-bottom: 30px;
}

Спасибо.

Answer 1

[FeST1VaL]

Открываете devtools и смотрите свою вложенность... У вас в тэге P after;

.program-week__items-mobile:last-child .program-week__item-text-mobile p:after {
    display:none;
}

А по факту у вас скорее всего ошибка в SCSS
& ::after { -> &::after {

И в следующий раз создавайте лучше песочницу. Почему за вас то это должны делать в итоге?