Positioning :after-pseudo behind text in a link - html

Question

I was wondering if it's possible to position the z-index of a :after-pseudo element so that it's behind a link's text. For example;
HTML
Here's a link
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;
}
}
What I'm trying to achieve here is to display the link's text. This is currently not happening because the :after element is overlapping it. I'd like to put the text to the front without using something like a <span> tag. Note: it should overlap its original background, but not the text.
Is there a way to achieve this, or is this simply impossible?

Answer 1

I found a proper solution. I'll use a box-shadow: inset 0 -3.125rem 0 #000; on the element instead. This way I don't have to use the :after element.
Thank you all for the comments.

Answer 2

You just need to add z-index:-1; to the :after-pseudo
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;
}
Here's a link
https://jsfiddle.net/d8htv6a9/

Answer 3

It's as easy as setting the z-index: -1; for the :after pseudo-element.
&:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -1; /* Set this */
background: #000;
}
Here's a JSFiddle: https://jsfiddle.net/thepio/tm9n0x5g/1/
EDIT:
Based on your comment, there is one trick you could use but I don't know if it will go along your animation. You could use a title attribute in the HTML itself and use it as the content of the :after pseudo-element.
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;
}
Here's a link
Then you can perhaps fade it in/out or whatever you prefer.
Here's a new JSFiddle: https://jsfiddle.net/thepio/tm9n0x5g/1/