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

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、Firefox、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;
}