Pseudo element is overriding main class

Question

I wanna make menu with logo in the middle where I want to have logo bigger than menu itself. So there is reason I want to add white line under logo. But when I add that line in pseudo element of logo (:after) it will override logo. I tried z-index but it doesn't work.

* {background-color: #ededed;}
header::before {
    content: "";
    display: block;
    width: 100%;
    height: 15px;
    background: linear-gradient(90deg, var(--main) 0, #7b31f4);
    position: relative;
}
.header-wrapper {
    width: 100%;
    height: 100px;
    display: flex;
}
.logo-wrapper {
    top: 70px;
    height: auto;
    position: absolute;
}
.logo::before{
    content: '';
    display: block;
    width: 334px;
    height: 82px;
    position: absolute;
    bottom: -40px;
    left: -50%;
    
    border-top: 80px solid #fff;
    border-left: 37px solid transparent;
    border-right: 37px solid transparent;
    
}
.logo {
    max-width: 150px;
}

nav {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;
}

ul.left,
ul.right {
    display: flex;
}

      <header>
      <div class="header-wrapper">
       <nav>
            <ul class="left">
                <li><a href="#" class="nav-item">Domov</a></li>
                <li><a href="#" class="nav-item">Hráči</a></li>            
            </ul>
            <div class="logo-wrapper">
                <div class="logo"><img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="HK Kúple Bojnice" width="100%"></div>
            </div> 
            <ul class="right">
                <li><a href="#" class="nav-item">Zápasy</a></li>
                <li><a href="#" class="nav-item">Novinky</a></li>
            </ul>
        </nav>
        </div>
        </header>

Answer 1

If I understood your question correctly it's about stacking the white object behind the logo, right? Give your white object a smaller z-index. That should do it. Like this:

* {
  background-color: #ededed;
}

header::before {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: linear-gradient(90deg, var(--main) 0, #7b31f4);
  position: relative;
}

.header-wrapper {
  width: 100%;
  height: 100px;
  display: flex;
}

.logo-wrapper {
  top: 70px;
  height: auto;
  position: absolute;
}

.logo::before {
  content: '';
  display: block;
  width: 334px;
  height: 82px;
  position: absolute;
  bottom: -40px;
  left: -50%;
  border-top: 80px solid #fff;
  border-left: 37px solid transparent;
  border-right: 37px solid transparent;
  z-index: -1;
}

.logo {
  max-width: 150px;
}

nav {
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
}

ul.left,
ul.right {
  display: flex;
}

<header>
  <div class="header-wrapper">
    <nav>
      <ul class="left">
        <li><a href="#" class="nav-item">Domov</a></li>
        <li><a href="#" class="nav-item">Hráči</a></li>
      </ul>
      <div class="logo-wrapper">
        <div class="logo"><img src="https://via.placeholder.com/150" alt="HK Kúple Bojnice" width="100%"></div>
      </div>
      <ul class="right">
        <li><a href="#" class="nav-item">Zápasy</a></li>
        <li><a href="#" class="nav-item">Novinky</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 2

Just add z-index

.logo::before {
  z-index: -1;
}