Ксения

.el:before {
content: 'text';
}
.green:before {
color: green;
}
.red:before {
color:red
}

Первый способ, как я понял, заворачивать в Элемент

<!-- у элемента в принципе не обязательно должен быть блок, но желательно -->
<div class="page__wrapper block"> 
    <div class="block__header header"></div>
</div>

а второй добавлять вспомогательные классы как-то так

@keyframes red {
    0% { left: -100px; }
    50% { left: 110px; }
    100% { left: 110px; }
} 
   
@keyframes red2 {
    0% { left: -100px; }
    50% { left: -100px; }
    100% { left: 100px; }
}