Have pseudo border break out of parent with overflow: auto - html

Question

I'm trying to create a horizontal/scrollable nav with gradient fades on each end. Setting the parent to overflow: auto almost solves my problem but hides my active link border, which I position absolute as a :before pseudo above its parent link. I was wondering if there was a way for me to keep the overflow while having my pseudo border break out of it? For the sake of this question, the gradient really doesn't matter per se but this structure needs to remain in tact.
ul {
margin: 0;
}
li {
display: inline-block;
}
.vertical-title {
height: 55px;
margin-bottom: 13px;
border-bottom: 3px solid #dceaec;
font-size: 22px;
line-height: 57px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.vertical-title-wrapper {
padding: 0;
z-index: 0;
position: relative;
}
.hub-nav {
display: block;
padding: 0 15px;
width: 100%;
z-index: 1;
white-space: nowrap;
overflow: auto;
}
.hub-nav-link {
position: relative;
}
.hub-nav-link.active-path:before {
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
position: absolute;
top: -16px;
background-color: #007eff;
}
<div class="hub-wrapper">
<div class="vertical-title">
Page Title
</div>
<nav class="hub-nav">
<ul class="hub-nav-list">
<li class="hub-nav-list-item">
<a class="hub-nav-link active-path" href="">
There's supposed to be a border above me!
</a>
</li>
</ul>
</nav>
</div>
<div>
Content Below
</div>

Answer 1

Negative margins will do the trick:
ul {
margin: 0;
}
li {
display: inline-block;
}
.vertical-title {
height: 55px;
margin-bottom: 13px;
border-bottom: 3px solid #dceaec;
font-size: 22px;
line-height: 57px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.vertical-title-wrapper {
padding: 0;
z-index: 0;
position: relative;
}
.hub-nav {
display: block;
padding: 0 15px;
width: 100%;
z-index: 1;
white-space: nowrap;
overflow: auto;
padding-top: 16px;
margin-top: -16px;
}
.hub-nav-link {
position: relative;
}
.hub-nav-link.active-path:before {
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
position: absolute;
top: -16px;
background-color: #007eff;
}
<div class="hub-wrapper">
<div class="vertical-title">
Page Title
</div>
<nav class="hub-nav">
<ul class="hub-nav-list">
<li class="hub-nav-list-item">
<a class="hub-nav-link active-path" href="">
There's supposed to be a border above me!
</a>
</li>
</ul>
</nav>
</div>
<div>
Content Below
</div>
So that you don't have to look for too long - I added these two lines into your snippet:
.hub-nav {
padding-top: 16px;
margin-top: -16px;
}