How to click on pseudo element using JQuery

Question

How to click on the pseudo Element using jQuery I'm unable to click on before element to change the background color:

$(".box:before").on('click',function(){
    (".box h1").css("background-color","red");
    });

.box:before{
    content:"";
    width:10px;
    height:10px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <h1>hello</h1>
    </div>

Please work on your question format. Make it look normal, and describe the problem and show what you have done to solve it. — James Douglas, Sep 22 '17 at 18:03
don't even think about it. You can't click on a pseudo element — vnt, Sep 22 '17 at 18:28

Mehdi Bouzidi · Answer 1 · 2017-09-24T12:02:50.013

First of all you've missed the $ sign in this instruction:

  (".box h1").css("background-color","red");

Then you can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new :after specified.

SOURCE: Access the css “:after” selector with jQuery

Please check & run the following code snippet for an alternative solution:

$(".box").on('click',function(){
    $(".box h1").css("background-color","red");
    });

.box:before{
    content:"";
    width:10px;
    height:10px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <h1>hello</h1>
    </div>

wrong, you better know about .before() before making this answer. See http://api.jquery.com/before/ — vnt, Sep 22 '17 at 18:37

How to click on pseudo element using JQuery

1 Answers1