使用CSS達到文字首尾對齊效果

在制作表單的時候經常會遇到需要不同個數的文字首尾對齊，比如：

<span>姓名：</span>
<span>聯系方式：</span>

姓名：
聯系方式：

有些人會使用直接在姓名之間添加&nbsp(No Break space)的方式來達到對齊效果例如：

<span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
<span>聯系方式：</span>

姓       名：
聯系方式：

使用這種方式是錯誤的，且不說代碼整潔程度如何，在不同的字體類型下一個&nbsp寬度可能是不同的。有時候一個文字需要兩個，有時候是三個甚至無法換算（類似於1.2個）。
在這里介紹一種通用的使用CSS達到效果的方式：

<style> span{ width:5em; } span::after { content:''; display:inline-block; width:100%; } </style>

<span>姓名：</span>
<span>聯系方式：</span>

只需給span標簽添加寬度並添加一個偽類即可實現相應效果

筆者發現這個方法對瀏覽器有要求，目前chrome下和部分firefox瀏覽器下可以正常使用