2016-09-13 7 views
0

a : after-pseudo 요소의 z- 인덱스를 링크의 텍스트 뒤에 배치 할 수 있는지 궁금합니다. 예를 들어;위치 지정 : 링크의 텍스트 뒤에서의 의사 - 뒤

HTML

a { 
    background: #666: 
    height: 40px; 
    padding: 0px 20px; 
    position: relative; 
    color: #FFF; 

    &:before { 
     /* this is occupied */ 
    } 

    &:after { 
     content: ""; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     display: block; 
     top: 0; left: 0; 
     background: #000; 
    } 
} 

은 내가 여기 달성하기 위해 노력하고있어 링크의 텍스트를 표시하는 것입니다

<a href="#">Here's a link</a> 

SCSS. :after 요소가 겹치기 때문에 현재이 문제가 발생하지 않습니다. <span> 태그를 사용하지 않고 텍스트를 맨 앞에 놓고 싶습니다. 참고 : 원본 배경과 겹치지 만 텍스트는 겹치지 않아야합니다.

이것을 달성 할 방법이 있습니까? 아니면 간단히 불가능합니까?

+0

Z- 색인을 수정하려는 모든 요소에는 위치 속성 (주로 "position : absolute")이 있어야합니다. 그리고 나서 그것을 움직여보십시오. –

+0

Z- 색인을 사용해 보셨습니까? –

+0

그리고 배경에 콘텐츠를 사용하지 않는 이유는 무엇입니까? 왜 그런 식으로 행동하는지 설명 할 수 있습니까? –

답변