위치 지정 : 링크의 텍스트 뒤에서의 의사 - 뒤

Question

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> 태그를 사용하지 않고 텍스트를 맨 앞에 놓고 싶습니다. 참고 : 원본 배경과 겹치지 만 텍스트는 겹치지 않아야합니다.

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