Separators

by _sir

HTML

<div class="badges">
  <div class="badge">First</div>
  <div class="badge">Second</div>
  <div class="badge">Third</div>
  <div class="badge">Fourth</div>
</div>

<div class="badges">
  <div class="badge">First</div>
  <div class="badge">Second</div>
  <div class="badge"></div>
  <div class="badge"></div>
</div>

<div class="badges">
  <div class="badge">First</div>
  <div class="badge"></div>
  <div class="badge"></div>
  <div class="badge">Fourth</div>
</div>

<div class="badges">
  <div class="badge"></div>
  <div class="badge"></div>
  <div class="badge"></div>
  <div class="badge">Fourth</div>
</div>

<div class="badges">
  <div class="badge">First</div>
  <div class="badge"></div>
  <div class="badge"></div>
  <div class="badge"></div>
</div>

CSS

body {
  background: white;
}

.badges {
  clear: both;
  margin-bottom: 1em;
}

.badge {
  float: left;
  height: 20px;
  padding: 5px;
}

.badge:empty {
  padding: 0;
}

.badges > div + div { 
  border-left: 1px solid blue;
}

.badges > div + div:empty {
  border-left: none;
}

.badges > div:empty + div {
  border-left: none;
}

.badges > div:not(:empty) ~ div:not(:empty) {
  border-left: 1px solid blue;
}