<span>
  <h1>Breadcrumbs</h1>
  <div class="campaign-list">
    <a href="#"><i class="fa fa-home"></i> Dashboard</a>
    <a href="#">Setup</a>
    <a href="#">Design</a>
    <a href="#">Prizes</a>
    <a href="#" class="grey">Approval</a>
    <a href="#" class="grey">Activation</a>
  </div>
</span>

@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css");

$dkgreen: #009426;
$green: #00bb31;
$dkgrey: #4b4f50;
$ltgrey: #ddd;
$grey: #b3b3b3;

*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  body {
    height: 100vh;
    font: 1rem / 1.5 sans-serif;
    background-color: #eee;
    display: grid;
    place-items: center;

    .campaign-list {

      a {
        text-decoration: none;
        font-size: 1.5rem;
        //display: inline-block;
        position: relative;
        padding: 0.375rem 0.5rem;
        background-color: $green;
        color: #fff;
        margin-right: 0.75rem;
        margin-bottom: 0.5rem;
        transition: background ease 200ms;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 100%;
          border-width: 1.25rem 0.375rem 1.25rem 0.75rem;
          border-style: solid;
          border-color: transparent transparent transparent $green;
          transition: border-color ease 200ms;
        }

        + a {
          margin-left: 0.5rem;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            right: 100%;
            border-width: 1.25rem 0.375rem 1.25rem 0.75rem;
            border-style: solid;
            border-color: $green $green $green transparent;
            transition: border-color ease 200ms;
          }
        }

        &:hover {
          background: $dkgreen;
          transition: background ease 200ms;

          &::before {
            border-color: $dkgreen $dkgreen $dkgreen transparent;
          }

          &::after {
            border-color: transparent transparent transparent $dkgreen;
          }
        }
        
        &:last-child {
          &::after {
            border: 0px;
          }
        }
      }

      .grey {
        background: $grey;
        transition: background ease 200ms;

        &::before {
          border-color: $grey $grey $grey transparent;
          transition: border-color ease 200ms;
        }

        &::after {
          border-color: transparent transparent transparent $grey;
          transition: border-color ease 200ms;
        }

        &::hover {
          background: $dkgrey;
          transition: background ease 200ms;

          &::before {
            border-color: $dkgrey $dkgrey $dkgrey transparent;
            transition: border-color ease 200ms;
          }

          &::after {
            border-color: transparent transparent transparent $dkgrey;
            transition: border-color ease 200ms;
          }
        }
      }
    }
    
    h1 {
      font-size: 2.4rem;
    }
  }
}