单行文本两端对齐

text-align规定行内内容如何相对它的块父元素对齐。它并不控制块元素自己的对齐，只控制它的行内内容的对齐。
text-align：justify只对多行文本生效。并且text-align不会对文本的最后一行起作用，因此最后一行依旧左对齐。单行文本的段落不会实现效果，因为单行文本既是第一行，也是最后一行。
单行文本如何实现两端对齐呢？
解决方法是：添加一个inline-block元素（可以添加一个标签或利用伪元素），并设置宽度为100%，那么这个时候inline-block的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了.
1、添加一个span标签的代码及效果截图：

代码截图1.png

2、使用::after伪元素

    p::after{
      content:'';
      width:100px;
      display:inline-block;
    }