Question

我正在为动态痕迹创建一组样式。

面包屑中的每个上一步都应该有一个border-bottom和一个正斜杠。正斜杠是在：之前完成的。

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

要更好地解释此问题，请参阅此代码集... http://codepen.io/anon/pen/dJEen

我试过做一个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;
}

非常感谢任何帮助。

Answer 1

您可以通过两种方式实现这一点，方法是将文本包装在span元素中并将border-bottom分配给span，否则您可以使用{{1在absolute和:before到relative

上

Demo （使用嵌套的a元素）

Demo （使用CSS定位）

span

同时确保使用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; }，您没有使用

从父元素具有边框的伪元素之前删除底部边框

1 个答案: