Sin -webkit-box-reflect colocado en el contenedor, todo funciona como se esperaba (:: after está detrás del elemento del contenedor debido al índice z: -1), pero cuando lo agrego, algo extraño comienza a suceder. El pseudo elemento todavía está detrás del texto, el botón y el elemento de entrada, pero no detrás del contenedor ("no detrás del color de fondo"). ¿Alguien sabe por qué pasa esto? ¡Ayudaría mucho!

Aquí está el código: https://jsfiddle.net/2ntadghb/10/

HTML:

 <div class="container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, exercitationem? <button> click it </button> <input type="text"> </div>

CSS:

 .container { width: 200px; height: 200px; border: 1px solid black; background-color: #151515; margin: 20px auto; position: relative; color: white; -webkit-box-reflect: below; } .container::after { content: ''; width: 100px; height: 100px; display: inline-block; background-color: red; position: absolute; z-index: -1; top: 0; left: 0; }