html - 親に境界線がある場合、:before 疑似要素から下の境界線を削除します

Question

動的ブレッドクラムの一連のスタイルを作成しています。

ブレッドクラムの前のすべてのステップには、border-bottom とスラッシュが必要です。スラッシュは :before として実行されます。

問題は、前の 2 つのステップの間にスラッシュがあり、右側の境界線に隙間がないことです。

この問題をよりよく説明するには、このコードペンを参照してください... http://codepen.io/anon/pen/dJEen

:before で border-bottom:0 を実行しようとしましたが、これは何もしません。私のコード:

HTML

<div>
    <a class="bcrmb" href="">Purchases</a>
    <a class="bcrmb" href="">Order </a>
    <span class="bcrmb">Delivery</span>
</div>

CSS

.bcrmb {
  font-size:24px; 
  font-weight:bold; 
  margin: @6px 0; 
  display:inline-block; 
  letter-spacing:-1px;
  font-family:sans-serif;
}
a.bcrmb {
  color:#777; 
  border-bottom:2px solid #777; 
  margin-right:3px;
}
span.bcrmb {
  color:#333;
}

a.bcrmb + .bcrmb:before {
  content:"/"; 
  margin-right:6px;
  border-bottom:0;
}

どんな助けでも大歓迎です。