2

我正在为动态面包屑创建一组样式。

面包屑中的每一步都应该有一个边框底部和一个正斜杠。正斜杠作为 :before 完成。

问题是当前两个步骤之间有一个正斜杠时，右侧的边框没有间隙。

为了更好地解释这个问题，请看这个codepen... 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;
}

任何帮助将不胜感激。

4

1 回答 1

3

您可以通过两种方式做到这一点，或者通过将文本包装在span元素中并将其分配border-bottom给span您可以使用 CSS 定位，通过使用absoluteon the:before和relativetoa

演示 （使用嵌套span元素）

演示 （使用 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;，你没有使用那个

于 2014-01-31T10:56:49.320 回答