Position element under its parent with :after - css

Question

I want to add a background under a button when hovering over it. I would like to make use of the :after pseudo selector in order to avoid including more markup.
button {
position: relative;
z-index: 1;
padding: 1rem 2rem;
background: blue;
color: white;
border: none;
transition: 0.25s ease all;
}
button:after {
opacity: 0;
content: "";
z-index: -1;
position: absolute;
top: 5%;
left: 5%;
width: 100%;
height: 100%;
background: red;
transition: 0.25s ease opacity;
}
button:hover:after {
opacity: 1;
}
<button>Hello world</button>
As you can see when hovering the red background is placed on top of the button's background which is not what I want.
Any ideas on how could I achieve this effect?
Here is a demo: https://codepen.io/cesalberca/pen/EEVMVx

Answer 1

Just remove the z-index from the button:
button {
position: relative;
padding: 1rem 2rem;
background: blue;
color: white;
border: none;
transition: 0.25s ease all;
}
button:after {
opacity: 0;
content: "";
z-index: -1;
position: absolute;
top: 5%;
left: 5%;
width: 100%;
height: 100%;
background: red;
transition: 0.25s ease opacity;
}
button:hover:after {
opacity: 1;
}
<button>Hello world</button>
Edit per comments (you need a span in the button):
button {
position: relative;
z-index: 1;
border: none;
background: transparent;
padding: 0;
}
button span {
display: inline-block;
padding: 1rem 2rem;
background: blue;
color: white;
transition: 0.25s ease all;
position: relative;
z-index: 2;
}
button:after {
opacity: 0;
content: "";
z-index: 1;
position: absolute;
top: 5%;
left: 5%;
width: 100%;
height: 100%;
background: red;
transition: 0.25s ease opacity;
}
button:hover:after {
opacity: 1;
}
<button><span>Hello world</span></button>

Answer 2

No extra element needed.
button {
border: 0;
outline: 0;
background: none;
position: relative;
display: inline-block;
padding: 1rem 2rem;
background: blue;
color: white;
transition: all .25s ease;
cursor: pointer;
}
button:after {
content: "";
opacity: 0;
position: absolute;
top: 5%;
left: 5%;
width: 100%;
height: 100%;
background: red;
z-index: -1;
transition: opacity .3s ease;
}
button:hover:after {
opacity: 1;
}
<button>Submit</button>