What is the best way to dynamically incorporate Before After CSS code in Vue?

Question

What is the best way to dynamically incorporate Before After CSS code in Vue?

I am facing a unique challenge in my current project. I need to dynamically apply colors from data inside a v-for loop, specifically for the :after CSS pseudo-element. While normal CSS properties are easily applicable, I am struggling with applying styles for :after. Here is what I have tried so far:

<div class="_tmln_shdl_crd_itm" v-for="(t, i) in timeLine" v-if="timeLine.length">
    <div class="_tmln_shdl_itm_lft">
        <p :style="`color:${t.color}`">{{t.time}}</p> // THIS WORKS
    </div>
    <style>
        ._tmln_shdl_itm_r8_one h4:after{ // ATTEMPTED TO WRITE CSS WITH FOR LOOP BUT FACED DIFFICULTIES
                color: t.color
         }
    </style>
<div>

Can anyone suggest how I can successfully style ._tmln_shdl_itm_r8_one h4:after? I appreciate any solutions or insights. Thank you.

javascript vue.js

Answer 1

Answer №1

Each time you create a style within the loop, it generates CSS for the same selector. The browser will only apply one set of CSS styling to that specific selector.
In the case of the same selector, the most recent CSS will override and be used. This concept is known as CSS Specificity ("When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.").

You have the ability to dynamically create classes:

<div class="_tmln_shdl_crd_itm" v-for="(t, i) in timeLine" v-if="timeLine.length">
    <div :class="`_tmln_shdl_itm_lft _tmln_shdl_itm_lft-${i}`">
        <h4>{{ t.time }}</h4>
    </div>
    <style>
        ._tmln_shdl_itm_lft-{{ i }} h4:after{
            color: {{ t.color }};
        }
    </style>
<div>

An approach like this should suffice. By making the class dynamic with ._tmln_shdl_itm_lft-{{ i }}, you can achieve the desired effect.
However, this method may lead to an abundance of unnecessary CSS on the page, which might not be ideal for a live environment.

Points to note:

In addition, ensure that you output t.color correctly as shown below (likely just an oversight in your example):
color: {{ t.color }};
It appears that there is no h4 tag present in the provided code snippet where the CSS can be applied, but presumably, it exists elsewhere on your page... hopefully?

Answer 2

Each time you create a style within the loop, it generates CSS for the same selector. The browser will only apply one set of CSS styling to that specific selector.
In the case of the same selector, the most recent CSS will override and be used. This concept is known as CSS Specificity ("When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.").

You have the ability to dynamically create classes:

<div class="_tmln_shdl_crd_itm" v-for="(t, i) in timeLine" v-if="timeLine.length">
    <div :class="`_tmln_shdl_itm_lft _tmln_shdl_itm_lft-${i}`">
        <h4>{{ t.time }}</h4>
    </div>
    <style>
        ._tmln_shdl_itm_lft-{{ i }} h4:after{
            color: {{ t.color }};
        }
    </style>
<div>

An approach like this should suffice. By making the class dynamic with ._tmln_shdl_itm_lft-{{ i }}, you can achieve the desired effect.
However, this method may lead to an abundance of unnecessary CSS on the page, which might not be ideal for a live environment.

Points to note:

In addition, ensure that you output t.color correctly as shown below (likely just an oversight in your example):
color: {{ t.color }};
It appears that there is no h4 tag present in the provided code snippet where the CSS can be applied, but presumably, it exists elsewhere on your page... hopefully?

What is the best way to dynamically incorporate Before After CSS code in Vue?

Answer №1

Similar questions

Can two Angular element components be utilized simultaneously on a single page in Angular 6?

Is there a way for me to determine if something is hidden?

The firebase collection's model doesn't include an add function within its nested collection

Fetching JSON data from an external URL using AngularJS

Counting duplicate values associated with the same key in a JSON array using JavaScript/NodeJS

Extracting a subclass from an array

Access-Control-Allow-Headers does not permit the use of request header X-CSRF-TOKEN

Exclusive to Safari: Codesandbox is experiencing difficulties retrieving data from the localhost server

React: Conceal additional elements once there are over three elements in each section

Autocomplete feature integrated within search bar

Angular mistakenly uses the incorrect router-outlet

Using a data() object in Vue to fill out form fields efficiently

Is it possible to utilize a React component within the DataGrid cell instead of the standard cell types like 'string', 'number', 'date', and 'dateTime' in Material UI?

What occurs when you use the statement "import someModuleName from someModule" in JavaScript?

If the next element in the sequence happens to be the final element, then conceal a separate

Ways to disable the ability to close a bootstrap modal by pressing the backspace key

React: automatically close other SubMenus when a new SubMenu is opened

Monitoring AJAX POST progress with Node.js and Multipart: XMLHttpRequest

SailsJS fails to transpile Bootstrap.js in a timely manner

Bootstrap form validation solution