Safariのフレックスボックスの問題 - モバイルとデスクトップ

Question

右の水平のルールは、デスクトップとモバイルのSafariのテキストと重なっています。
重複を防ぐにはどうすればよいですか？

http://codepen.io/simply-simpy/pen/EyENLr

h2 { 
 
    align-items: center; 
 
    display: flex; 
 
    font-size: 3.125vw; 
 
    margin-top: 0; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
h2:after { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-left: 1.875vw; 
 
    width: 100%; 
 
} 
 

 
h2:before { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-right: 1.875vw; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    align-items: center; 
 
    align-content: center; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="container"> 
 
    <h2>precision</h2> 
 
</div>

Answer 1

あなたh2:beforeとh2:after上flex-grow: 1;の代わりwidth: 100%;を使用することで問題を解決します。

h2 { 
 
    align-items: center; 
 
    display: flex; 
 
    font-size: 3.125vw; 
 
    margin-top: 0; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
h2:after { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-left: 1.875vw; 
 
    flex-grow: 1;   /* <--- Replace */ 
 
} 
 

 
h2:before { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-right: 1.875vw; 
 
    flex-grow: 1;   /* <--- Replace */ 
 
} 
 

 
.container { 
 
    align-items: center; 
 
    align-content: center; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="container"> 
 
    <h2>precision</h2> 
 
</div>