스크롤에서 Psuedo 요소가 움직이지 않도록 방지

-1

창이 크기가 조정될 때 내 psuedo 라인을 같은 장소 ('우리 이야기'사이)에 둘 수있는 방법은 무엇입니까?스크롤에서 Psuedo 요소가 움직이지 않도록 방지

<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; 

    }

출처

2017-10-24 jlannister

이 사람 LOL 나는 보통 자신처럼 개인에게 회신 할 필요성을 찾을 수없는,하지만 난 저항 할 수 없었다. 당신의 comment.1의 시작부터 시작하자 .1 : 나는 피곤하다. 나는 철자가 틀린 것이 유감이다. 2 : 나는 내 코드를 표시하는 데 어려움을 겪고 있었다. 그래서 나는 그대로 질문을 제출했다 .3. 이봐, 그 스택 오버플로. 적절한 문법이 필요하다는 것을 몰랐다. 나는 너를 아프게해서 진심으로 유감이다. 신의 축복이 있기를 바랍니다. 행복하게 사는 사람을 찾으십시오. 의도적으로 개인에게 불쾌감을 느끼는 사람은 행복하지 않은 사람 이니까요. – jlannister

당신의이 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>

출처

2017-10-24 03:31:09 Cons7an7ine

완벽하니, 고마워요! – jlannister

스크롤에서 Psuedo 요소가 움직이지 않도록 방지

답변

관련 문제