H2の側面にある2本の線、下側と上側

Question

この2つのh2要素があります。

XXXX YYYY

そして、私は私のindex.htmlでこれを達成したい：

---------- 
      XXXXXX 
       ---------- 

---------- 
      YYYYYY 
       ---------- 

2行、両側に、上部と下部。 HTML5とCSS。 私は最初のh2のためにそれをすることができますが、それは2番目のh2のために働くことができません。それはすべてのスクランブルを取得します。

.container2 { 
width:100%; 
} 

.column { 
width:33.33333333%; 
float:left; 
} 


<div class="container2" style="margin-top:200px"> 
<div class="column" style="border-top: 1px solid black"> 
    <h2><span style="font-size:0.5em;"></span></h2> 
</div> 
<div class="column"> 
    <h2><span style="font-size:1.5em;" onclick="openNavVentas()">Ventas</span></h2> 
</div> 
<div class="column" style="border-bottom: 1px solid black"> 
    <h2><span style="font-size:0.5em;"></span></h2> 
</div> 

Answer 1

このような何かを私は推測始める必要があります...

<style> 
    .test > * { width: 32%; display: inline-block; } 
    .test > hr:nth-child(1) { margin-top: -10px; margin-bottom: 10px; } 
    .test > hr:nth-child(3) { margin-top: 10px; margin-bottom: -10px; } 
</style> 
<div class="test"> 
    <hr /> 
    <h2>XXXXXX</h2> 
    <hr/> 
</div> 

例ここでは... https://jsfiddle.net/rb9LsuLd/

Answer 2

私は、あなたが "クリア" する必要があると思います浮かぶ。

.container2 { 
    width:100%; 
    clear: both; 
} 

https://jsfiddle.net/dwv1qqch/

Answer 3

あなたはborder-imageとしてCSS linear-gradientを使用してこの効果を実現することができます。

実施例：

h2 { 
 
text-align:center; 
 
margin-bottom: 48px; 
 
padding: 12px; 
 

 
border: 3px solid transparent; 
 
border-image: linear-gradient(
 
    to bottom right, 
 
    rgba(0,0,0,1) 19%, 
 
    rgba(0,0,0,0) 20%, 
 
    rgba(0,0,0,0) 80%, 
 
    rgba(0,0,0,1) 81%); 
 
border-image-slice: 1; 
 
border-left: none; 
 
border-right: none; 
 
}

<h2>First Heading 2</h2> 
 
<h2>Second Heading 2</h2>