Style binding on pseudo selector


I want to do this in my template:
:class=’{ normal: !inverted }’,
:style=’{ “background-image”: “/static/images/svg/” + icon + “.svg” }

but on the :after pseudo selector. I haven’t found a way to do this.

Is this possible? Or a workaround?


1 Like

This is not really possible, because you can’t apply pseudoselector rules in a style attribute of an elemen (not related to Vue).

Looking at articles like the following, it seems dynamically changing them requires to write actual rules to a <style> element via the DOM API - not a very pretty sight:

Was afraid of that… Thanks for the reply :slight_smile:

If you really need to do it then you can generate stylesheet on a fly and inject generates style tag to a page. But I wouldn’t recommend this approach. More details here:

More elegant solution:
Assuming that you have a finite set of icons, I would rather define a separate CSS class for each icon (like .icon--icon-name-1, icon--icon-name-2, ... , icon--icon-name-{n}). This is an easy solution. If you have large amount of icons then instead of writing this code by hand I would generate that code with scss and for loop.

Thanks. I’ve changed to HTML now to have the image in a seperate tag. Not exactly what I wanted but atleast I can use bindings on it :slight_smile:

I want to use it in border-color property for tooltip implementation. But I could not find a way. Does anybody know how to do it? I have following code but it does not work. ‘dynamicColor’ is reactive object.

<div class="test">
    <span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">

div.test span.marker {
  position: absolute;
  width: 28px;
  height: 15px;
  border-radius: 2px;
  display: block;
  top: -25px;
  font-size: 10px;
  text-align: center;

div.range span.marker::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: attr(color) transparent transparent transparent;

so incase anyone is still after this, you can use css vars


.my-class {
    --gradient: black; // you can omit this if you want, as it will be available in the style attr

    &::before {
        // ...
        color: var(--gradient);

and use like usual, ex.

<div class="my-class" :style="styleObject"></div>

data: {
  styleObject: {
    '--gradient': 'red',
    // etc...

Excellent!!! So Thank you!! It perfectly works!!! SO GENIUS!!!

Just a small warning: This doesn’t work with IE.

1 Like

Said every developer on every project ever :joy:


Rohanil you could use currentColor which supports all the browsers


Browser support:


I was helped by this decision HTMLElement.pseudoStyle

Absolute life saver! Thank you :slight_smile:


i would like to share a solution that i found for a project i am working on. This looks quite smart.

Original solution is here by acdcjunior

i made few changes accordingly on jsfiddle here. You can reactively change class names and style any pseudo element/class you want :wink:

i hope this helps…cheers