Desativar animação CSS no pseudo elemento herdado do pai

O título praticamente diz tudo, mas aqui está um exemplo.

Digamos que eu tenho um CSS 'loading spinner' como abaixo:

.spinner {
    height: 50px;
    width: 50px;
    position: relative;
    animation: rotate .6s infinite linear;
    border-left: 6px solid #222;
    border-right: 6px s,olid #222;
    border-bottom: 6px solid #222;;
    border-top: 6px solid #ccc;
    border-radius: 100%; 
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Quero adicionar um pseudo elemento a isso - por exemplo, comcontent: 'loading...' antes ou depois.spinner.

É possível garantir que o pseudo elemento não herda a animação de.spinner, ou um pseudo elementosempre pegue o que os pais têm?

questionAnswers(2)

yourAnswerToTheQuestion