title: How to add pseudo element in ::-webkit-scrollbar-button
body: <p>I'm trying to make a webkit button with linear background along with an icon with the help of ::before element but it does not worked out. Is there any possible way to do the same?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;bar2&quot;&gt;
          &lt;div class=&quot;nav-items&quot;&gt;BOOKS&lt;/div&gt;
          &lt;div class=&quot;nav-items&quot;&gt;SONGS&lt;/div&gt;
          &lt;div class=&quot;nav-items&quot;&gt;COOK&lt;/div&gt;
          &lt;div class=&quot;nav-items&quot;&gt;GAMES&lt;/div&gt;
          &lt;div class=&quot;nav-items&quot;&gt;Recents&lt;/div&gt;
        &lt;/div&gt;
  &lt;style&gt;
  .bar2{
    display: flex;
    width: 300px;
    overflow-x: overlay;
    background: grey;
  }
  .nav-items{
    padding:10px;
  }
  .bar2::-webkit-scrollbar-track{display: none;}
  .bar2::-webkit-scrollbar{background: transparent; height: 30px;}
  .bar2::-webkit-scrollbar-button:single-button:horizontal:decrement{
    background: url(angle-left.svg);
    background-repeat: no-repeat;
    background-size: 15px;
  }
  .bar2::-webkit-scrollbar-button:single-button:horizontal:increment{
    background: linear-gradient(to left,white,#00000000);
  }
  .bar2::-webkit-scrollbar-button:single-button:horizontal:increment::before{
    position: absolute;
    background: url(angle-right.svg);
    background-repeat: no-repeat;
    background-size: 15px;
  }
  .bar2::-webkit-scrollbar-thumb{display: none;}
  
  &lt;/style&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>