title: Custom chevron and circle on Slick Slider - circle disappears after clicking
body: <p>I have created a custom left and right chevron with a circle for Slick Slider Carousel, but when ever I click on the left or right chevron, the circle disappears. When I go to click outside of the circle or click on the opposite chevron the circle comes back. I think it has to do with the before pseudo-class that overwrites the current element. Can someone help me and explain what I am doing wrong? I have a working <a href="https://jsfiddle.net/protonus/7j1u2c2z/2/" rel="nofollow noreferrer">JS Fiddle here</a>. I don't know why the CSS is not loading first in the code snippet on here so you cannot see it working here. Check the JSFiddle one, thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.carousel-one').slick({
    arrows: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    autoplay: true,
    autoplaySpeed: 2000
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slick-next:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  .slick-prev:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  
  .slick-prev:hover,
  .slick-next:hover {
    background-color: rgba(255, 255, 255, 0.7);
    width: 45px;
    height: 45px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
  }
  
  .slick-prev:hover {
    padding-left: 8px;
  }
  
  .slick-next:hover {
    padding-right: 8px;
  }
  
  .slick-next {
    right: 20px;
    padding-right: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    width: 45px;
    height: 45px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
  }
  
  .slick-prev {
    left: 20px;
    padding-left: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    width: 45px;
    height: 45px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"&gt;&lt;/script&gt;
  &lt;div class="carousel-one"&gt;
    &lt;div&gt;&lt;img src="http://lorempixel.com/400/200" alt="Image three"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="http://lorempixel.com/400/200" alt="Image one"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="http://lorempixel.com/300/200" alt="Image two"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="http://lorempixel.com/320/200" alt="Image four"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="http://lorempixel.com/400/200" alt="Image five"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="http://lorempixel.com/200/200" alt="Image seven"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="http://lorempixel.com/300/200" alt="Image six"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>