html - 如何强调使用CSS列属性创建的间隙？

我要在下划线并每两位数字分隔一个数字。

这是我尝试过的内容及其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，Firefox，IE和Safari兼容的解决方案。

最佳答案

请注意position: relative上的其他.number。
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;
}

关于html - 如何强调使用CSS列属性创建的间隙？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25627553/