Only show box-shadow on part of a side - html

Question

So I have a header that is shown in the snippet below.
My problem is I only want the shadow around the a tag to show on the part that has expanded out of its container div, to create the impression that the white edge is all one element.
Basically I only want the shadow on the left and on the right to go from the bottom of the a element to the bottom of the div. While also showing on the bottom of the a element.
Screenshot of what I'm after in case my descriptive capabilities are not functioning:
I've tried playing with z-index but haven't been able to get it to work.
My thought with z-index was to push the a behind the div, then pull the img in front of all.
I would prefer a CSS-only solution, as I don't want to have to modify the html, but if I have to I have to.
* {
padding: 0;
margin: 0;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
box-shadow: 0px 0px 5px #000000;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
</div>

Answer 1

Here is box-shadow syntax,
box-shadow: offset-x | offset-y | blur-radius | spread-radius | color
Try reducing it's spread-radius and increase it shadow towards y-axis.
* {
padding: 0;
margin: 0;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
position: relative;
}
a:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 5px #000000;
z-index: -1;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
</div>

Answer 2

EDIT:-
Using jquery you can compute the css for span dynamically. Check this.
Html modified, added a <span> below anchor tag and added shadow to the span
* {
padding: 0;
margin: 0;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
/*box-shadow: 0px 0px 5px #000000;*/
z-index:100;
position:absolute;
}
.shadow {
display: inline-block;
margin-left: 30px;
padding: 10px;
margin-top:50px;
height: 10px;
width:120px;
background: white;
box-shadow: 0px 0px 5px #000000;
z-index:0;
position:absolute;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
<span class="shadow">r
</span>
</div>

Answer 3

You can get it by css pseudo element.
Just add css part
a:after {
content:'';
position:absolute;
bottom:0px;
left:0px;
height:20px;
display:block;
width:100%;
box-shadow:5px 5px 5px -5px #000000;
}
a:before {
content:'';
position:absolute;
bottom:0px;
left:0px;
height:20px;
display:block;
width:100%;
box-shadow:-5px 5px 5px -5px #000000;
}
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
position:relative;
/* box-shadow:0px 5px 5px -5px #000000; */
}
a:after {
content:'';
position:absolute;
bottom:0px;
left:0px;
height:20px;
display:block;
width:100%;
box-shadow:5px 5px 5px -5px #000000;
}
a:before {
content:'';
position:absolute;
bottom:0px;
left:0px;
height:20px;
display:block;
width:100%;
box-shadow:-5px 5px 5px -5px #000000;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
</div>