How to deal with :before :after(pseudo classes) of CSS in jQuery?

Question

I am stuck in a problem.

PROBLEM

I have a slider, the next and previous buttons are my :before and :after classes.

.about .slider:after
{
    content:"⇁";
    display:block;
    position:absolute;
    font-size:60px;
    color:#093;
    top:100px;
    right:0px;
    cursor:pointer;
    z-index:99

}

.about .slider:before

{
    content:"↼";
    display:block;
    position:absolute;
    font-size:60px;
    color:#093;
    top:100px;
    cursor:pointer;
    z-index:99
}

Now i want to set a function on click using jQuery. How to deal with these pseudo classes.

i tried like this:

$(document).ready(function(e) {
           $('.about').on('click', '.slider:before',function(){
                //action on click function
           });
        });

The browser says that

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: before

What is wrong here?