How to remove last before/after pseudo-element?

Question

Sass

Good afternoon.
Faced a problem to remove the last pseudo-element.
Tried the following options:

.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;
}

Removes either all pseudo-elements or none at all.

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;
}

Thank you.

Answer 1

Open devtools and see your nesting... In your P after tag;

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

And in fact, you most likely have a bug in SCSS
& ::after {->&::after {
And next time create a better sandbox. Why do you have to do it for you in the end?