如何突出顯示用CSS列屬性創建的間隙？

Question

我想爲每兩位數字加下劃線和分隔數字。

這裏是我的嘗試和demo：

CSS

.number { 
    width: 8em; 
    display: block; 
    word-wrap: break-word; 
    columns: 5; 
    -webkit-columns: 5; 
    -moz-columns: 5; 
    column-gap: 0.2em; 
    -webkit-column-gap: 0.2em; 
    -moz-column-gap: 0.2em; 
    text-decoration: underline; 
} 

HTML

<span class="number">0102030405</span> 

正如你可以在演示中看到，空間創造了每兩數字不加下劃線。

我該如何強調它們？

注：

我在尋找的Chrome，火狐，IE和Safari瀏覽器兼容的解決方案。

Answer 1

請注意.number上的額外position: relative。
Jsfiddle。

.number { 
    width: 8em; 
    display: block; 
    word-wrap: break-word; 
    columns: 5; 
    -webkit-columns: 5; 
    -moz-columns: 5; 
    column-gap: 0.2em; 
    -webkit-column-gap: 0.2em; 
    -moz-column-gap: 0.2em; 
    text-decoration: underline; 
    position: relative; 
} 

.number:before { 
    background: black; 
    bottom: 3px; 
    content: ""; 
    height: 1px; 
    left: 0; 
    position: absolute; 
    right: 0.5em; 
}