Html 文本外部模式的CSS解决方案

我试图在网站的某个部分设置样式，并在某些文本的每一侧运行一个模式。您可以在这里看到我从PSD文件中截取的屏幕截图-->红色箭头指向我发现难以解决的问题区域

你知道怎么做吗

以下是我的开始：

<div class="box">
    <h2>Some text here</h2>
</div>

这是小提琴-->

---

正如您所看到的，条纹是垂直的，而不是我的初始屏幕截图中所看到的水平条纹。

这不是很完美，需要您在before/after元素上设置一个固定的宽度（我能想到的最好方法是在需要响应的情况下使用JavaScript），但如下所示：

h2{
    display:inline-block;
    vertical-align:middle;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:50px;
    display:inline-block;
    vertical-align:middle;
}

编辑

这是一个稍微有点响应，但仍然有点小尺寸切断，并在其他人看来不成比例：

.box {
    width:50%;
    overflow:hidden;
}
h2{
    display:inline-block;
    vertical-align:middle;
    width:100%;
    white-space:nowrap;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:20%;
    display:inline-block;
    vertical-align:middle;
}

---

这不是很完美，需要在before/after元素上设置一个固定的宽度（如果需要响应，我能想到的最好方法是使用JavaScript），但下面是：

h2{
    display:inline-block;
    vertical-align:middle;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:50px;
    display:inline-block;
    vertical-align:middle;
}

编辑

这是一个稍微有点响应，但仍然有点小尺寸切断，并在其他人看来不成比例：

.box {
    width:50%;
    overflow:hidden;
}
h2{
    display:inline-block;
    vertical-align:middle;
    width:100%;
    white-space:nowrap;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:20%;
    display:inline-block;
    vertical-align:middle;
}

---

尝试下面介绍的解决方案：

快报：

---

尝试下面介绍的解决方案：

快报：

---

用一些代码开始更新用一些代码开始更新