css - 絶対配置 on :before 要素 on 要素 表示付き: table-cell

Question

要素の行があり、display: table-cell; を使用してスタイルを設定したい。テキストの位置を垂直方向の中央にします。アクティブな要素の上に水平バーを追加する必要がある場合、行がアクティブな状態になることがあります。このバーは、行から少なくとも 1 ピクセル離れている必要があります。これには :before 疑似要素を使用しましたが、Chrome では問題なく動作しますが、Firefox では、表示: table-cell; のためにうまく動作しません。

これに対する解決策はありますか？できればjavascriptなしのもの。

Firefox ではなく Chrome で動作します: http://jsfiddle.net/Danny_Joris/CYwUZ/

<div id="wrapper">
  <div class="col1">col1 col1 col1</div>
  <div class="col2">col2 col2 col2</div>
  <div class="col3">col3 col3 col3</div>    
</div>

#wrapper {
  margin: 40px 0 0 0;
  position: relative;
  background: yellow;
  display: inline-block;
}

#wrapper > div {
  width: 33%;
  display: table-cell;
  vertical-align: middle;
  height: 75px;
  width: 60px;
  border: 1px solid #ccc;
  text-align: center;
  position: relative;
}

.col2:before {
  content: '';
  position: absolute;
  top: -7px;
  height: 5px;
  background: lightblue;
  left: -1px;
  right: -1px;
  z-index: 50;
}