CSS文字两端对齐

好记性不如烂笔头，写了几次都忘了，起个随笔加深下记忆。

HTML

<div class="container">
    <div><span>肆个字哦</span>：四个字啊</div>
    <div><span>壹</span>：一</div>
    <div><span>贰字</span>：两字</div>
    <div><span>叁个字</span>：三个字</div>
</div>

样式

.container span {
   70px;
  text-align: justify;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.container span:after {
  content: " ";
  display: inline-block;
   100%;
  height: 0px;
}

运行结果