Background Image on pseudo elements

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 &amp; 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 &amp; 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%);
}