Set selector style in html code dynamically

Question

I have three buttons. They have an animation when hovered over. I load my file with the ejs render engine. I want to have different animation colors for the three buttons, and set these dynamically when I send the html page.

I tried something like this:

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

All the animation is defined throught button-style, I also define the after style there:

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

How could I achieve this?

You cannot use pseudo-classes, like `:after` in the style attribute (inline styles). [CSS Pseudo-classes with inline styles](https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles) — jeffjenx, Jun 06 '19 at 16:36
What you rather should do instead is create additional CSS classes for this purpose and put them on the button when you need them. — connexo, Jun 06 '19 at 16:46

score 0 · Accepted Answer · answered Jun 06 '19 at 17:33

You'll have to use classes instead and set your classes in code behind. As mentioned, you can't use pseudo classes in a style tag;

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

Set selector style in html code dynamically

1 Answers1