html - 框上有两条水平线

This question already has answers here:

Line before and after title over image [duplicate]
                                
                                    （2个答案）
                                
                        
                                4年前关闭。
            
                    
我试图在一个框上绘制两条水平线：
http://codepen.io/anon/pen/gpZqOQ

我使用了一个插件来基于设计生成一些代码。但是最终结果并未优化。

<h1 id="H1_1">
    <span id="SPAN_2">Feedback</span>
</h1>

#H1_1 {
    box-sizing: border-box;
    clear: both;
    color: rgb(64, 64, 64);
    height: 45px;
    position: relative;
    text-align: center;
    width: 1140px;
    perspective-origin: 570px 22.5px;
    transform-origin: 570px 22.5px;
    border: 0px none rgb(64, 64, 64);
    font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
    margin: 0px 0px 70px;
    outline: rgb(64, 64, 64) none 0px;
}/*#H1_1*/

#H1_1:after {
    box-sizing: border-box;
    color: rgb(64, 64, 64);
    display: block;
    height: 1px;
    left: 0px;
    position: absolute;
    text-align: center;
    top: 22.5px;
    width: 1140px;
    align-self: stretch;
    perspective-origin: 570px 0.5px;
    transform-origin: 570px 0.5px;
    content: '"' '"';
    background: rgb(189, 195, 199) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(64, 64, 64);
    font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
    outline: rgb(64, 64, 64) none 0px;
}/*#H1_1:after*/

#SPAN_2 {
    box-sizing: border-box;
    color: rgb(189, 195, 199);
    display: inline-block;
    height: 45px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 108.890625px;
    z-index: 10;
    perspective-origin: 54.4375px 22.5px;
    transform-origin: 54.4375px 22.5px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 3px solid rgb(189, 195, 199);
    font: normal normal bold normal 15px/normal Montserrat, sans-serif;
    outline: rgb(189, 195, 199) none 0px;
    padding: 10px 20px;
    transition: all 0.2s ease 0s;
}/*#SPAN_2*/

还有其他更简单的方法可以通过CSS实现吗？

最佳答案

<hr style=" width : 100%;">
<span id="SPAN_2">Feedback</span>

应用以下CSS

hr{
  display: inline-block;
  margin: 25px 0;
  position: absolute;
}
#SPAN_2 {
  position: absolute;
  z-index: 2;
  display: inline-block;
  border: 3px solid rgb(189, 195, 199);
  outline: rgb(189, 195, 199) none 0px;
  padding: 10px 20px;
  margin: 0 0 0 50%;
}