Pseudo after element css properties are not working in jquery

Question

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 why it is not working.

$(document).ready(function() {
  $('.box').click(function() {
    $('.box:after').css('background-color', 'yellow');
  });
});

.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;
}

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

Possible duplicate of [Access the css ":after" selector with jQuery](https://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery) And there are about 20 questions about accessing pseudo-elements with javaScript/jQuery on StackOverflow alone. Please research before posting here. Just by 'asking' on google `pseudo-elements with jquery` you would've found at least 30 helpful answers. — Mihai T, May 21 '19 at 06:14

score 1 · Answer 1 · answered May 21 '19 at 05:47

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

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

score 0 · Accepted Answer · answered May 21 '19 at 05:47

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

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

Pseudo after element css properties are not working in jquery

2 Answers2

Linked