overflow: hidden; only for certain elements?

Question

I'm trying to add a navigation bar to my website but I want to prevent some elements (::before & ::after) from flowing out of the container and allow others (div class="indicat").

I've tried changing the background to transparent but that makes the navigation bar appear in the background.

Codepen link: https://codepen.io/Muh-Ail/pen/qBpROJa?editors=0100

const list = document.querySelectorAll('.list');
function activeLink(){
    list.forEach((item) => 
    item.classList.remove('act'));
    this.classList.add('act');
}
list.forEach((item) =>
item.addEventListener('click',activeLink));

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: gray;
  
}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    width: fit-content;
/*     overflow: hidden; */
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 70px;
    background-color: #fff;
    position: relative;
    border-radius: 10px;
}

.navigation ul {
    display: flex;
    width: 350px;
    margin: 0;
    padding: 0;
}

.navigation ul li {
    position: relative;
    list-style: none;
    width: 70px;
    height: 70px;
    z-index: 1;
}

.navigation ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
}

.navigation ul li a .icon {
    position: relative;
    display: block;
    line-height: 75px;
    font-size: 1.5em;
    text-align: center;
    transition: .5s;
    color: #222327;
}

nav svg {
    width: 35px;
    height: 35px;
}

.navigation ul li a .icon svg {
    transition: .5s;
    fill: #222327;
}

.navigation ul li.act a .icon {
    transform: translateY(-27px);
}

.navigation ul li a .text-mob-nav {
    position: absolute;
    color: #222327;
    font-weight: 700;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    transition: .5s;
    opacity: 0;
    transform: translateY(20px);
}

.navigation ul li.act a .text-mob-nav{
    opacity: 1;
    transform: translateY(10px);
}

.indicat {
    position: absolute;
    top: -50%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 6px solid #222327;
    background-color: #29fd53;
    transition: .5s;
}

.indicat::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-top-right-radius: 20px;
    box-shadow: 1px -10px 0 0 #222327;
}

.indicat::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-top-left-radius: 20px;
    box-shadow: -1px -10px 0 0 #222327;
}

.navigation ul li:nth-child(1).act ~ .indicat {
    transform: translateX(calc(70px * 0));
}

.navigation ul li:nth-child(2).act ~ .indicat {
    transform: translateX(calc(70px * 1));
}

.navigation ul li:nth-child(3).act ~ .indicat {
    transform: translateX(calc(70px * 2));
}

.navigation ul li:nth-child(4).act ~ .indicat {
    transform: translateX(calc(70px * 3));
}

.navigation ul li:nth-child(5).act ~ .indicat {
    transform: translateX(calc(70px * 4));
}

    <nav>
        <div class="navigation">
            <ul>
                <li class="list act">
                    <a href="#">
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                <path
                                    d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z" />
                            </svg>
                        </span>
                        <span class="text-mob-nav">Home</span>
                    </a>
                </li>

                <li class="list">
                    <a href="#">
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                                <path
                                    d="M304 0h-224c-35.35 0-64 28.65-64 64v384c0 35.35 28.65 64 64 64h224c35.35 0 64-28.65 64-64V64C368 28.65 339.3 0 304 0zM192 480c-17.75 0-32-14.25-32-32s14.25-32 32-32s32 14.25 32 32S209.8 480 192 480zM304 64v320h-224V64H304z" />
                            </svg>
                        </span>
                        <span class="text-mob-nav">Categories</span>
                    </a>
                </li>

                <li class="list">
                    <a href="#">
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                <path
                                    d="M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM224 368C237.3 368 248 357.3 248 344V280H312C325.3 280 336 269.3 336 256C336 242.7 325.3 232 312 232H248V168C248 154.7 237.3 144 224 144C210.7 144 200 154.7 200 168V232H136C122.7 232 112 242.7 112 256C112 269.3 122.7 280 136 280H200V344C200 357.3 210.7 368 224 368z" />
                            </svg>
                        </span>
                        <span class="text-mob-nav">Rent</span>
                    </a>
                </li>

                <li class="list">
                    <a href="#">
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path
                                    d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z" />
                            </svg>
                        </span>
                        <span class="text-mob-nav">Love</span>
                    </a>
                </li>

                <li class="list">
                    <a href="#">
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                <path
                                    d="M272 304h-96C78.8 304 0 382.8 0 480c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32C448 382.8 369.2 304 272 304zM48.99 464C56.89 400.9 110.8 352 176 352h96c65.16 0 119.1 48.95 127 112H48.99zM224 256c70.69 0 128-57.31 128-128c0-70.69-57.31-128-128-128S96 57.31 96 128C96 198.7 153.3 256 224 256zM224 48c44.11 0 80 35.89 80 80c0 44.11-35.89 80-80 80S144 172.1 144 128C144 83.89 179.9 48 224 48z" />
                            </svg>
                        </span>
                        <span class="text-mob-nav">User</span>
                    </a>
                </li>
                <div class="indicat"></div>
            </ul>
        </div>
    </nav>