execute function in before and after content

Question

I have a before and after in a div with their respective meet.

Would like to click on in that content and perform a function jQuery.

It is possible?

I tried it the way down but it didn’t even work alert:

$(document).ready(function(e) {
      $(".slideShow ul:nth-child(1)::before").on("click", function() {    
      alert();
          index = $(this).index() + 1;
          $(".slideShow ul:nth-child(1) li").css("display","none");
          $(".slideShow ul:nth-child(1) li:nth-child("+index+")").css("display","block");
      });   
 });

HTML

<div class="slideShow">
  <ul>
    <li><img class="aberturaSelect" src="_imgs/_slideShow/1.png" /></li>
    <li><img class="aberturaSelect" src="_imgs/_slideShow/2.png" /></li>
    <li><img class="aberturaSelect" src="_imgs/_slideShow/3.png" /></li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    /*outline: none;*/
    border: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgb(150,150,150);
}
body {
    font-size: 14px;
}
ul {
    width: 100%;
    list-style: none;
}
.aberturaSelect {
    -webkit-transition: 3s ease 2s;
    -moz-transition: 3s ease 2s;
    -o-transition: 3s ease 2s;
    transition: 3s ease 2s;
}
.slideShow {
    width: 100%;
}
.slideShow ul:nth-child(1)::before {
    position: absolute;
    left: 20px;
    top: 150px;
    content: url(_imgs/setaEsquerda.jpg);
    opacity: 0;
}
.slideShow ul:nth-child(1)::after {
    position: absolute;
    right: 20px;
    top: 150px;
    content: url(_imgs/setaDireita.jpg);
    opacity: 0;
}
.slideShow ul:nth-child(1):hover::before, 
.slideShow ul:nth-child(1):hover::after {
    opacity: 1;
    cursor: pointer;
}
.slideShow ul:nth-child(1) li {
    display: none;
}
.slideShow ul:nth-child(1) li:nth-child(1) {
    display: block;
}
.slideShow ul:nth-child(1) li img {
    width: 100%;
}
.slideShow ul:nth-child(2) li {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: rgba(0,0,0,.5);
    color: rgb(255,255,255);
    text-align: center;
    cursor: pointer;
}