使用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浏览器下可以正常使用