CSS HTML Çizgi arasına Yazı Yazma

Merhaba arkadaşlar css ile bir türlü çizgi arasına yazı yazdıramadım before after ayarlıyorum fakat ayarladığım çizgi çıkmıyor

Görsel ekler misiniz?

Before'u çizgi after'i yazının arka planı olarak yapmayı deneyin. Yazıyı ortalayıp after'ida ortalarsanız iki çizgi arasında yazı yazmış gibi görünürsünüz.

İki element kullanarak. Birinci elementın before yada after'ı çizgi ikincininde before yada after'ını bg olarak kullanabilirsiniz. Yada ikinci elementin direk bg sini kullanabilirsiniz. Ortalama yaparak iki çizgi arasında kalmış gibide gösterebilirsiniz.

@cReens;

        .box{
            position: relative;
            width:500px;
            height: auto;
            padding: 10px;
            border:solid 1px red;
            display: flex;
            justify-content: center;
        }
        .box::before{
            position: absolute;
            content: '';
            width: 100%;
            height: 2px;
            background-color: black;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 0;
        }
        .box h1{
            position: relative;
            z-index: 1;
            background-color: #fff;
            padding: 0 10px;
        }

    <div class="box">
        <h1>Selamlar Naber</h1>
    </div>

Hocam aynısını yapıyorm ama çizgiler görünmüyor yazı ortalanmış şekilde gözüküyor