Позиционирование: after-pseudo позади текста по ссылке

Question

Мне было интересно, можно ли поместить z-индекс элемента after-pseudo, чтобы он находился за текстом ссылки. Например;

HTML

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

SCSS

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

То, что я пытаюсь достичь здесь, чтобы отобразить текст ссылки. В настоящее время этого не происходит, потому что элемент :after перекрывает его. Я хотел бы поместить текст на передний план, не используя что-то вроде тега <span>. Примечание: он должен перекрывать исходный фон, но не текст.

Есть ли способ достичь этого, или это просто невозможно?

Answer 1

Это так же просто, как установка z-index: -1; для псевдоэлемента :after.

&:after { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    z-index: -1; /* Set this */ 
    background: #000; 
} 

Вот JSFiddle: https://jsfiddle.net/thepio/tm9n0x5g/1/

EDIT:

Основываясь на ваш комментарий, есть один трюк, вы могли бы использовать, но я не знаю, если он будет идти по анимации. Вы можете использовать атрибут title в самом HTML и использовать его как содержимое псевдоэлемента :after.

a { 
 
    position: relative; 
 
    background: #666; 
 
    height: 40px; 
 
    padding: 0px 20px; 
 
    position: relative; 
 
    color: #FFF; 
 
    z-index: 1; 
 
} 
 
a:after { 
 
    content: attr(title); 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
    left: 0; 
 
    background: #000; 
 
    color: white; 
 
    text-align: center; 
 
}

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

Тогда вы можете, возможно, будет постепенно исчезать в/из или что вы предпочитаете.

Вот новый JSFiddle: https://jsfiddle.net/thepio/tm9n0x5g/1/

Answer 2

Вам просто нужно добавить z-index:-1; к :after Псевдо

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

 
a:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; left: 0; 
 
    background: #000; 
 
    z-index:-1; 
 
}

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

https://jsfiddle.net/d8htv6a9/

Answer 3

я нашел правильное решение. Вместо этого я использую box-shadow: inset 0 -3.125rem 0 #000;. Таким образом, мне не нужно использовать элемент :after.

Спасибо всем за комментарии.