从父元素边框的伪元素前移除底部边框

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;，你是不是使用