スクロールで擬似要素が動かないようにする

Question

ウィンドウのサイズを変更したときに擬似線を同じ場所に置くにはどうすればいいですか？

<div class='section_1'> 
<div class="grid-x"> 
    <div class='large-12 cell'> 
     <h2 class='story_header'>Our Story</h2> 
    </div> 
</div> 

CSS

.story_header{ 
position:relative; 
display:flex; 
justify-content: center; 
} 
.story_header:before, .story_header:after{ 
content:''; 
width:100px; 
position:absolute; 
border:2px solid black; 
margin-top:20px; 
left:35%; 
} 

.story_header:after{ 
right:35%; 
left:auto; 

    } 

Answer 1

あなたがのがspanは、そのspan上の擬似要素を追加しましょう要素に '私たちの物語' をラップする必要があります。これを試してみてください：

CSS：

.story_header{ 
    position:relative; 
    display:flex; 
    justify-content: center; 
} 

.story_title{ 
    position:relative; 
} 

.story_title:before, .story_title:after{ 
    content:''; 
    width:100px; 
    position:absolute; 
    border:2px solid black; 
    margin-top:20px; 
} 

.story_title:before{ 
    right:100%; 
} 

.story_title:after{ 
    left:100%; 
} 

HTML：

<div class="grid-x"> 
    <div class='large-12 cell'> 
     <h2 class='story_header'> <span class="story_title">Our Story</span></h2> 
    </div> 
</div>