從父元素邊框的僞元素前移除底部邊框

Question

我正在爲動態麪包屑創建一組樣式。

麪包屑中每一個前面的步驟都應該有一個邊框底部和一個正斜槓。正斜線完成爲：之前。

問題是，當前兩步之間存在正斜槓時，右側邊框沒有間隙。

要解釋這個問題比較好，請參閱本codepen ... http://codepen.io/anon/pen/dJEen

我已經嘗試做了下邊框：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; 
} 

任何幫助將不勝感激。

Answer 1

你可以做到這一點有兩種方式，要麼通過包裝在span元素的文本和分配border-bottom到span否則，你可以使用CSS定位，通過使用absolute在:before和relative到a

Demo（使用嵌套span元素）

Demo（使用CSS定位）

a.bcrmb { 
    color:#777; 
    border-bottom:3px solid #777; 
    margin-right:3px; 
    position: relative; 
    margin-right: 15px; 
} 

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

---

另外，還要確保你使用text-decoration: none;，你是不是使用