Background Image on pseudo elements - css

Question

I am trying to insert background images into each tab as per the screenshot below but because the arrow is created using pseduo elements I am not sure how to do it.
Please see below a snippet of where I am upto so far. The final product should look like the screenshot so I am just missing the images in the background. Be sure to view the snippet in expanded view.
I have tried setting a background image with a colour in front but that didnt work. I cant seem to figure it out for the life of me!
If anyone could help that would be greatly appreciated.
/* CDCD HOMEPAGE */
.u-nav-v8-2 .nav-item:first-child .nav-link {
padding: 35px 85px 35px 135px;
}
.u-nav-v8-2 .nav-link {
padding: 35px 100px 35px 135px;
}
[class*="u-nav-v8"] .nav-link {
background-color: #767577;
}
[class*="u-nav-v8"] .nav-link::after {
background-image: linear-gradient(to left, #767577 0%, rgba(118, 117, 119, 1) 100%);
}
.u-nav-v8-2 .nav-link::before {
background-image: linear-gradient(to bottom left, transparent 49.6%, #767577 50%), linear-gradient(to top left, transparent 49.6%, #767577 50%);
}
[class*="u-nav-v8"] .nav-link.active {
background-color: #B81818;
}
[class*="u-nav-v8"] .nav-link:hover {
background-color: #B81818;
}
[class*="u-nav-v8"] .nav-link:hover:after,
[class*="u-nav-v8"] .nav-link:hover:before {
background-image: linear-gradient(to bottom left, transparent 49.6%, #B81818 50%), linear-gradient(to top left, transparent 49.6%, #B81818 50%);
}
.u-nav-v8-2 .nav-link.active::before {
background-image: linear-gradient(to bottom left, transparent 49.6%, #B81818 50%), linear-gradient(to top left, transparent 49.6%, #B81818 50%);
}
[data-tabs-mobile-type="slide-up-down"] {
padding-top: 0px;
}
[data-tabs-mobile-type="slide-up-down"] .nav-link {
border: none;
border-width: 0px;
border-style: none !important;
}
#media (max-width: 991px) {
.u-nav-v8-2 .nav-item:first-child .nav-link {
padding: 35px 85px 35px 85px;
}
.u-nav-v8-2 .nav-link {
padding: 35px 100px 35px 85px;
}
}
<link href="http://impression.testcre8.co.uk/assets/css/unify-components.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://impression.testcre8.co.uk/assets/vendor/bootstrap/bootstrap.min.js"></script>
<link href="http://impression.testcre8.co.uk/assets/css/unify-core.css" rel="stylesheet" />
<link href="http://impression.testcre8.co.uk/assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" />
<!-- CDCD -->
<ul class="nav nav-fill justify-content-center d-flex flex-wrap flex-lg-nowrap u-nav-v8-2" role="tablist" data-target="nav-8-2-primary-hor-center" data-tabs-mobile-type="slide-up-down" data-btn-classes="btn btn-md u-btn-primary btn-block">
<li class="nav-item">
<a class="nav-link active" href="/impression-visual-branding-services/visual-branding-consultancy/">
<h2 class="text-uppercase u-nav-v8__title g-color-white text-left g-mb-5">Consult <i class="fas fa-arrow-right g-pos-rel g-ml-10 material-icons"></i></h2>
<p class="u-nav-v8__description g-color-white introText text-left g-mb-0">Understanding your brief, campaign goals & vision.</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#creativeConcept">
<h2 class="text-uppercase u-nav-v8__title g-color-white text-left g-mb-5">Design <i class="fas fa-arrow-right g-pos-rel g-ml-10 material-icons"></i></h2>
<p class="u-nav-v8__description g-color-white introText text-left g-mb-0">Creative concepts that bring your brief to life.</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#modeling3D">
<h2 class="text-uppercase u-nav-v8__title g-color-white text-left g-mb-5">Create <i class="fas fa-arrow-right g-pos-rel g-ml-10 material-icons"></i></h2>
<p class="u-nav-v8__description g-color-white introText text-left g-mb-0">Fully in-house, quality-assured production.</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#happyClients">
<h2 class="text-uppercase u-nav-v8__title g-color-white text-left g-mb-5">Deliver <i class="fas fa-arrow-right g-pos-rel g-ml-10 material-icons"></i></h2>
<p class="u-nav-v8__description g-color-white introText text-left g-mb-0">Packing, dispatch & on site installation management.</p>
</a>
</li>
</ul>
<!-- END CDCD -->

Answer 1

In order for pseudo element to be visible you must provide content property, e.g. content: ''; in your case. Also don't forget to setup width and height.
[class*="u-nav-v8"] .nav-link::after {
content: '';
display: block;
width: 50px;
height: 50px;
background-image: linear-gradient(to left, #767577 0%, rgba(118, 117, 119, 1) 100%);
}