title: Using before CSS, add circle in the background
body: <p>I want to add a circle behind the navigation button. But i am unable to achieve it. I am using Swiper.</p>
  
  <p>These are some snapshots when i am positioning circle below the navigation arrow.</p>
  
  <p><a href="https://i.stack.imgur.com/RY5f2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RY5f2.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/CBrzK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CBrzK.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/kzcMj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kzcMj.png" alt="enter image description here"></a></p>
  
  <p>As you can see, when i am adjusting margin-left of ::before, the background circle goes above of the navigation button. I am using pseudo::before css to create circle. But i can't achieve it. This is my css work. Please check it, and let me know, where am i doing wrong?</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-css lang-css prettyprint-override"><code>.content .swiper-button-next {
      height: 25px;
      padding-left: 62px;
      padding-top: 0px;
      margin-top: -13px;
      z-index: 4 !important;
      position: absolute;
  }
  
  .swiper-button-next.swiper-button-white{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
      right: 10px;
      left: auto;
  }
  
  .swiper-button-next, .swiper-button-prev {
      top: 50%;
      width: 27px;
      cursor: pointer;
      background-size: 27px 44px;
      background-position: center;
      background-repeat: no-repeat;
  }
  
  
  .content .swiper-button-next:before {
      content: '';
      display: inline-block;
      width: 50px;
      height: 50px;
      -moz-border-radius: 50%;
      border-radius: 50%;
      margin-left: -53px;
      margin-top: -11px;
      opacity: 0.7;
      z-index: -2;
      position: relative;
      background: #080808;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content swiper-container-horizontal swiper-container-free-mode"&gt;
      &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance.</p>