White pixels around after and before pseudo-elements

Question

I'm trying to create a chevron like layout to filter and visualize some information on some simple tables. But, for some reason, some white pixels appear between the main element and its borders. I'm using box-shadow to fill out the element when I'm hovering it.

When I was writing this I found out the problem is the "inset" on box-shadow, but I don't know a way to solve the issue, any advice?

Here a screenshot:

Edit: searching the question provided by @TylerH on the comments, lead me to some solutions and using will-change: transform, on .li::after and .li::before solve the problem with the jagged border, but another problem appeared, a horizontal line appeared on the middle of the items:

It's very thin, but it's very noticeble.

Edit 2: So I solved the line problem setting a z-index bigger than the background and now it's working, special thanks to @TylerH that give me the link that lead me to the solution. It's a known bug, actually its very old, but there's a lot of solutions.

Here is the code and a JSFiddle:

:root {
  --width-funil: 50px;
  --width-tamTotal: calc(var(--width-funil) + 32px);
  --width-tamTotal2: calc(var(--width-funil) + 34px);
  --width-tamTotal3: calc(var(--width-funil) + 15px);
  --height-funil: 50px;
  --border-size: 1px;
  --lumenk: #F15E36;
  --border-color: grey;
  --cor-fundo: white;
}

.li {
  height: var(--height-funil);
  width: var(--width-funil);
  padding-left: 20px;
  background: var(--cor-fundo);
  color: black;
  display: inline-block;
  position: relative;
  margin-left: 20px;
  line-height: 50px;
  font-family: sans-serif;
  font-size: 15px;
  box-sizing: unset !important;
}

.li::before,
.li::after {
  content: '';
  left: -15px;
  position: absolute;
  height: 23px;
  width: var(--width-tamTotal);
  border-left: 2px solid var(--border-color);
  border-right: 2px solid var(--border-color);
  box-sizing: unset !important;
}

.li::before {
  border-top: 2px solid var(--border-color);
  transform-origin: 0% 0%;
  transform: skewX(30deg);
  top: 0;
  box-shadow: inset 0 8px 0 8px var(--cor-fundo), inset -6px 8px 0 8px var(--cor-fundo);
}

.li::after {
  border-bottom: 2px solid var(--border-color);
  transform-origin: 0% 100%;
  transform: skewX(-30deg);
  bottom: 0;
  box-shadow: inset 0 -8px 0 8px var(--cor-fundo), inset -6px -8px 0 8px var(--cor-fundo);
}

.li:hover {
  color: white;
  background-color: var(--lumenk);
}

.li:hover::before {
  color: white;
  box-shadow: inset 0 8px 0 8px var(--lumenk), inset -6px 8px 0 8px var(--lumenk);
}

.li:hover::after {
  color: white;
  box-shadow: inset 0 -8px 0 8px var(--lumenk), inset -6px -8px 0 8px var(--lumenk);
}


/* First and Last styles */

.li:first-of-type {
  left: -15px;
  box-shadow: 15px 0 0 0 var(--cor-fundo);
  border-left: 2px solid var(--border-color);
}

.li:first-of-type::before,
.li:first-of-type::after {
  left: -1px;
  width: var(--width-tamTotal2);
  border-left: 0;
}

.li:first-of-type:hover {
  color: white;
  box-shadow: 15px 0 0 0 var(--lumenk);
}

.li:last-of-type {
  left: 0px;
  width: var(--width-tamTotal3);
  box-shadow: inset -2px 0 0 0 var(--border-color), inset 0 -2px 0 0 var(--border-color), inset 0 2px 0 0 var(--border-color);
  border: 0;
}

.li:last-of-type::before,
.li:last-of-type::after {
  left: -15px;
  border-right: 0;
}

.li:last-of-type:hover {
  color: white;
  background: var(--lumenk);
}

.fa-solid {
  margin-right: 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div>
  <div class="li"><i class="fa-solid fa-file-lines"></i>200</div>
  <div class="li"><i class="fa-solid fa-file-circle-exclamation"></i>49</div>
  <div class="li"><i class="fa-solid fa-laptop-file"></i>38</div>
  <div class="li"><i class="fa-solid fa-file-signature"></i>25</div>
  <div class="li"><i class="fa-solid fa-file-invoice-dollar"></i>15</div>
</div>