Displaying a shadow ontop of pseudo element - html

Question

I am trying to achieve the following effect:
The code I have is as follows:
.box {
background: #fff;
width: 600px;
height: 100px;
position: relative;
z-index: 999;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
}
.box::after {
background: linear-gradient(to right, #00a1e4 25%, #ff9a00 25%, #ff9a00 50%, #00a525 50%, #00a525 75%, #8c449d 75%);
position: absolute;
content: "";
height: 10px;
right: 0;
left: 0;
bottom: -10px;
z-index: 1;
}
<div class="box">
</div>
The pseudo element appears ontop of the box shadow in the above example,
how can I get the shadow to appear over the top of the pseudo element?
Here is the example on codepen

Answer 1

You may redraw a shadow inside the pseudo :
.box {
background: #fff;
width:600px;
height:100px;
position: relative;
z-index: 999;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
}
.box::after {
background: linear-gradient(to right,
#00a1e4 25%,
#ff9a00 25%,
#ff9a00 50%,
#00a525 50%,
#00a525 75%,
#8c449d 75%);
position: absolute;
content: "";
height: 10px;
right: 0;
left: 0;
bottom: -10px;
z-index: 1;
box-shadow: inset 0 5px 4px -3px rgba(0, 0, 0, 0.75);
}
<div class="box">
</div>
you may also use mix-blend-mode :
.box {
background: #fff;
width:600px;
height:100px;
position: relative;
z-index: 999;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
}
.box::after {
background: linear-gradient(to right,
#00a1e4 25%,
#ff9a00 25%,
#ff9a00 50%,
#00a525 50%,
#00a525 75%,
#8c449d 75%);
position: absolute;
content: "";
height: 10px;
right: 0;
left: 0;
bottom: -10px;
z-index: 1;
mix-blend-mode:multiply;
}
<div class="box">
</div>