Remove bottom border from :before pseudo element when parent has border

Question

I am creating a set of styles for a dynamic breadcrumb.

Every previous step in the breadcrumb should have a border-bottom and a forward slash. The forward slash is done as a :before.

The problem is when there is a forward slash between two previous step's, there is no gap in the border on the right side.

To explain this problem better, please see this codepen... http://codepen.io/anon/pen/dJEen

I have tried doing a border-bottom:0 on the :before but this does nothing. My code:

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;
}

Any help would be greatly appreciated.

Answer 1

You can do that in two ways, either by wrapping the text in a span element and assigning the border-bottom to span else you can use CSS positioning, by using absolute on the :before and relative to a

Demo (Using nested span elements)

Demo (Using CSS Positioning)

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;
}

---

Also make sure you use text-decoration: none;, you aren't using that

Answer 2

In addition to Mr. Alien comment,

Using nested <span> is not always an option, because sometimes there is no access to HTML code.

Positioning of absolute element is not a good idea, because it will be hard or impossible to properly position it for different font sizes, font families, styles, or on different devices or screen sizes. Even on the demo link provided, arrow is a bit off on my screen.

So, I would add the third way, by adding a relative to parent (em), negative right margin to pseudo element.

Demo

a {
    text-decoration: none;
}

.bcrmb {
    font-size:24px; 
    border-bottom:3px solid #777;
}

.bcrmb:after {
    content:">"; 
    padding-left: 4px;
    margin-right: -0.75em;
}