Style binding on pseudo selector

Hey,

I want to do this in my template:
.button(
@click=‘onClick’,
: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?

Thanks

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:

http://pankajparashar.com/posts/modify-pseudo-elements-css/

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

Workaround:
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: http://pankajparashar.com/posts/modify-pseudo-elements-css/.

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">
       smallText
    </span>
</div>

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

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

ex.

.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 https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles like usual, ex.

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


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

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:

4 Likes

Rohanil you could use currentColor which supports all the browsers

Example:
https://jsfiddle.net/2Lb77ow3/2/

Browser support:
https://caniuse.com/#search=currentColor

4 Likes

I was helped by this decision HTMLElement.pseudoStyle

Absolute life saver! Thank you :slight_smile:

hi,

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