舌头不能定位在嘴巴上层伪元素与嘴巴之中

.mouth{
            width:68px;
            height:17px;
            position:absolute;
            left:50%;
            top:76px;
            transform: translate(-50%);
            background-color: #673136;
            border-radius: 34px/0px 0px 17px 17px;
            box-shadow: 0px 0px 5px 0px inset;
            z-index: 1;
            overflow: hidden;
        }
        .mouth::before{
            content: "";
            z-index: 3;
            position:absolute;
            display: block;
            width:68px;
            height:7px;
            background:var(--bg);
            border-radius: 34px/0px 0px 7px 7px;
            }
             .tongue{
            width:34px;
            height:14px;
            background-color:#a2504f;
            border-radius: 17px/0px 0px 7px 7px;
            position: absolute;
            left: 50%;
            top:82px;
            transform: translate(-18px);
            box-shadow: 0px 0px 5px 0px inset;
            z-index: 2;
        }

老师这是这三个部分的代码，mouth层级1 mouth：：before层级3   tongue层级2，按理说tongue应该在中间，可是他一直在上面。

我的理解是：伪元素的层级不是应该是在父元素就是mouth里面变吗，就是相对1在上面或者下面，但不会脱离“1”这个层次。

麻烦老师解答一下，谢谢