Is there any way to change ::after style in JavaScript?

Asked Oct 18 '20 at 13:22

Active Oct 18 '20 at 13:35

Viewed 40 times

how can I change ::after in JavaScript?

I want when I hovered on it change the ::after property width.

var li_a = document.getElementsByClassName('effect-underline');
console.log(li_a);
var li_a_width;
var n;

for (n = 0; n < li_a.length; n++) {


    li_a[n].addEventListener('mouseover', function() {

        li_a_width = this.offsetWidth;
        this.style.width = li_a_width;
        console.log(li_a_width);
    })
}

.effect-underline::after {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    height: 2px;
    width: 100%;
    border-bottom: 1px solid #303F9F;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
}

.effect-underline:hover::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

 <ul class="nav navbar-nav">
     <li class="effect-underline"><a href="#">Home </a></li>
     <li class="effect-underline"><a href="#">About </a></li>
     <li class="effect-underline"><a href="#">Resume </a></li>
     <li class="effect-underline"><a href="#">Contact </a></li>
  </ul>

Please help me to change width property in after by JavaScript.

edited Oct 18 '20 at 13:35

asked Oct 18 '20 at 13:22

kimia

from the duplicate: https://stackoverflow.com/a/49618941/8620333 – Temani Afif Oct 18 '20 at 13:27
What do you need the js for? It does work on my end. – Tsubasa Oct 18 '20 at 13:39
_"Is there any way to change `::after` style in JavaScript?"_ Yes, you can attach the `::after` pseudo-element styles to a `class` in your CSS and then toggle the `class` using javascript. – Rounin Oct 18 '20 at 13:43
@Ava Because I want to set the element width dynamical – kimia Oct 18 '20 at 13:49
@Rounin could I get width dynamic? – kimia Oct 18 '20 at 13:56
Idk why you need a dynamic width for, you could just set the width from css only. – Tsubasa Oct 18 '20 at 14:20

Is there any way to change ::after style in JavaScript?

0 Answers0