html - CSS问题位置

This question already has answers here:

Line before and after title over image [duplicate]
                                
                                    （2个答案）
                                
                        
                                4年前关闭。
            
                    
这是html部分：

<div class="sama_productblocks_grid">
    <div class="title-bar">
        <h3>Nieuwste producten</h3>
    </div>
.....
</div>

这是CSS

 .sama_productblocks_grid .title-bar h3 {
     margin: 0;
     position: relative;z-index: 3;
     font-size:18px;
     display: inline-block;
     color: #6D6C6C;
     font-weight: 400;
     text-transform: uppercase;
     font-family: "Open Sans",sans-serif !important;
     padding: 0px 65px;
}
/*newest product*/
.title-bar{
    position: absolute;
    overflow: hidden;
    margin-bottom: 10px;
    text-align: center;
    border-bottom:3px solid black;
    z-index: 3;
    width:100%;
    margin-bottom: 10px;
}
.sama_productblocks_descrition {margin-top:40px;}

我要实现的是在文本之前和之后加上一行：Nieuwste producten。所以我想看起来像这样：
----------- Nieuwste producten ------------

最佳答案

这是你想要的？

body {
    margin-top: 50px;
}

.hr-div {
    height: 1px;
    background-color: #e6e6e7;
    text-align: center;
    margin: 10px 0 10px -10px;
}
.hr-span {
    background-color: white;
    position: relative;
    top: -10px;
    padding:0 10px;
}

<div class="hr-div">
    <span class="hr-span">Your Title Here</span>
</div>