Div with Only Left Edge Inside Border

Issue

I've found lots of posts about inside borders using box-shadow, but apart from those with a true shadow effect, I can't find any that work for a div to show an inside border of 1 pixel with a specific colour. All the working examples show borders on all sides or right and bottom, but not just one side, except this post, but it's using an unordered list/list items and I can't figure out how to adapt it for the format I'm looking for?
This is my container div:

.navContainer {
line-height: 24px;
vertical-align: middle;
width: 296px;
height: 40px;
background-color: #FFFFFF; 
opacity: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 16px;
padding-right: 16px;
}

And when a user hovers, I want a border to appear on the left inside edge, like this:

This is the hover element:

.navContainer:hover {        
background-color: #F9F2FE; 
-webkit-box-shadow: inset 1px 0px 0px -1px #611E90; 
-moz-box-shadow: inset 1px 0px 0px -1px #611E90; 
box-shadow: inset 1px 0px 0px -1px #611E90;
}

But I have no border showing at all.

This is how it's being implemented, but I'll raise a separate question about that:

                    <div class="navContainer">
                    <div class="navPending"></div>
                    <a href="intranet-page-url" target="_blank">Product overview</a>
                </div>

.navContainer {
  line-height: 24px;
  vertical-align: middle;
  width: 296px;
  height: 40px;
  background-color: #FFFFFF;
  opacity: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
}

.navContainer:hover {
  background-color: #F9F2FE;
  -webkit-box-shadow: inset 1px 0px 0px -1px #611E90;
  -moz-box-shadow: inset 1px 0px 0px -1px #611E90;
  box-shadow: inset 1px 0px 0px -1px #611E90;
}

<div class="navContainer">
  <div class="navPending"></div>
  <a href="intranet-page-url" target="_blank">Product overview</a>
</div>

Solution

.navContainer {
  line-height: 24px;
  vertical-align: middle;
  width: 296px;
  height: 40px;
  background-color: #fafafa;
  opacity: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 25px;
  padding-right: 16px;
  border-left: 3px solid #eee;
    display: flex;
    align-items: center;
}
.navContainer a {
  text-decoration:none;
  color:#512876;
}
.navContainer:hover {
  background-color: #F9F2FE;
  -webkit-box-shadow: inset 1px 0px 0px -1px #611E90;
  -moz-box-shadow: inset 1px 0px 0px -1px #611E90;
  box-shadow: inset 1px 0px 0px -1px #611E90;
  border-color:#512876;
}

<div class="navContainer">
  <div class="navPending"></div>
  <a href="intranet-page-url" target="_blank">Product overview</a>
</div>

Answered By - krishna