title: Custom bootstrap 4 breadcrumbs arrow effect
body: <p>I am trying to modify the <strong>bootstrap 4</strong> breadcrumbs in stead of this <code>/</code> divider I would like <code>&gt;</code> look like but all the way to edge Just like in this image</p>
  
  <p><a href="https://i.stack.imgur.com/9p8OS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9p8OS.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>Question How can I make my breadcrumbs show full arrow at end of link like image above.</p>
  </blockquote>
  
  <p><a href="https://codepen.io/wolfgang1983/pen/zdJdOd" rel="nofollow noreferrer">Codepen Demo</a></p>
  
  <p>My CSS</p>
  
  <pre><code>.breadcrumb {
      border-top: 1px solid #ddd !important;
      border-bottom: 1px solid #ddd !important;
      background-color: #f5f5f5 !important;
  }
  
  .breadcrumb::after {
      display: block;
      clear: both;
      content: "";
  }
  
  .breadcrumb-item {
      float: left;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 100%;
      z-index: 1;
      display: block;
      width: 0;
      height: 0;
      border-top: 32px solid transparent;
      border-bottom: 32px solid transparent;
      border-left: 16px solid transparent;
  }
  
  .breadcrumb-item + .breadcrumb-item:hover::before {
      text-decoration: underline;
  }
  
  .breadcrumb-item + .breadcrumb-item:hover::before {
      text-decoration: none;
  }
  
  .breadcrumb-item.active {
      color: #868e96;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ol class="breadcrumb"&gt;
      &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
      &lt;li class="breadcrumb-item active"&gt;Data&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>