Pseudo After Element Css Properties Are Not Working In Jquery

I'm working on the pseudo class element here on hover I want to change ::after background color, I have tried but its is not working. Can anyone suggest me in the right direction w

Solution 1:

Js not supporting pseudo element properties. better Do with css

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: red;
}

.box:after {
  content: '';
  position: absolute;
  top: 133%;
  width: 50px;
  height: 50px;
  background-color: green;
}

.box:hover:after {
  background-color: yellow;
}

.content {
  position: absolute;
  left: 50px;
  width: 0;
  height: 50px;
  background-color: blue;
  transition: all 0.5s linear;
}

.box:hover.content {
  width: 600px;
  transition: all 0.5s linear;
}

<divclass="box"><divclass="content"></div></div>

Solution 2:

you cannot target pseudo element in jQuery so i have created 1 class changed

.changed:after{
 background-color: yellow;
}

and toggled that class when hover in jQuery.

Hope this helps. thanks

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).toggleClass('changed');
  });
});

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: red;
}

.box:after {
  content: '';
  position: absolute;
  top: 133%;
  width: 50px;
  height: 50px;
  background-color: green;
}

.content {
  position: absolute;
  left: 50px;
  width: 0;
  height: 50px;
  background-color: blue;
  transition: all 0.5s linear;
}

.box:hover.content {
  width: 600px;
  transition: all 0.5s linear;
}

.changed:after{
 background-color: yellow;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><divclass="box"><divclass="content"></div></div>