Установить стиль селектора в HTML-коде динамически

Question

У меня три кнопки.У них есть анимация, когда завис.Я загружаю свой файл с помощью механизма рендеринга ejs.Я хочу иметь разные цвета анимации для трех кнопок и установить их динамически при отправке html-страницы.

Я пробовал что-то вроде этого:

<button class="button button--style" onclick="window.location.href='/location'" style=":after {background: <%= color %>;}">Button 1</button>

Вся анимация определяется во времяbutton-style, я также определяю стиль после:

.button--style::after {
    background: #f00;
}

Как мне этого добиться?

Answer 1

Вместо этого вам придется использовать классы и устанавливать ваши классы в коде.Как уже упоминалось, вы не можете использовать псевдо-классы в теге стиля;

<button class="button button--style" onclick="window.location.href='/location'" class="<%= class1variable %>">Button 1</button>

class1::after {
    background-color: #F0F0F0;
}

class2::after {
    background-color: #BLAH;
}