Is accessing pseudo element from element such as is different from accessing pseudo element with class name such as .active-span?

Question

I am using angular's class for conditionally binding class. I have element with class .active-span. but using pseudo element of for initial styling and then using transition in .active-span is not working.

Html code:

<span [class]="spanNumber == 1?'get-app__header__active-span':''">Fast</span>, <span [class]="spanNumber == 2?'get-app__header__active-span':''">Safe</span>, <span [class]="spanNumber == 3?'get-app__header__active-span':''">Reliable</span> <br> 
              <span [class]="spanNumber == 4?'get-app__header__active-span':''">payments</span>
            </div>

css Code:

// Accessing pseudo element from <span> element.
span{
      transition: all 3s ease-in-out;
      border: none;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: 0%;
        height: 1px;
        top: 100%;
        margin-top: -0.5px;
        background: #cc0000;
        right: 2.5px;
        background: #cc0000;
        transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
    }

// accessing pseudo element from class name
 .get-app__header__active-span{
      &::after{
        width: 100%;
      }
    }

Edited: Yes, accessing pseudo element from element such as is same from accessing pseudo element with class name such as .active-span. In my case problem was with specificity. Just adding !important worked for me.

// accessing pseudo element from class name
 .get-app__header__active-span{
      &::after{
        width: 100% !important;
      }
    }