htmlcsscss-content

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

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.

Solution

  • 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