How to change css pseudo propery in module

[SH82]

I have premade module where i need to change background gradient by content creator by  targeting .classname__image::after element. i able to change element from " .classname__image" element but cannt target any pseduo element.

how can i creat multiple gradient color and content creator just click checkbox and color change.

.classname__image {
  text-align: right;
}


.classname__image::after {
  background:linear-gradient(256.1deg,rgba(56,158,60,.76) 15.56%,rgba(38,91,55,.79) 78.17%);
}

[Anton · Accepted solution]

Hi @SH82, 

have you tried it like this

.classname__image:after { {# just one colon instead of two #}
  background:linear-gradient(256.1deg,rgba(56,158,60,.76) 15.56%,rgba(38,91,55,.79) 78.17%);
}

For the second question: Are we talking about custom modules?

If so you could

- create different classes for each gradient like

.gradient1{
{# code for the first gradient #}
}
.gradient2{
{# code for the second gradient #}
}
.gradient3{
{# code for the third gradient #}
}

in a/your CSS file

- create a select option in the custom module and set the class names as the select value

- finaly place the code in the desired <div> like

<div class="some-class {{module.gradient_selector}}">
...
</div>

best, 

Anton

[Jaycee_Lewis]

Thanks for the in-depth reply and for the examples, @Anton  🙌 – Jaycee

[Jaycee_Lewis]

Hi, @SH82 thanks for the code snippet! Let's see if any of our smart cookies here in the community can assist. Hey, @Anton and @amwilie do you have any ideas for @SH82?

Thank you very much 🧡  – Jaycee