实际使用，自行补全兼容

一、实现固定宽度内文本长度不一样的居中对齐

1、史前方式

靠慢慢加&emsp 或者&nbsp 来调整，原始、粗暴、效率低

<p>密&emsp;&emsp;码</p>
<p>用&emsp;户&emsp;名</p>
<p>身&emsp;份&emsp;证&emsp;号</p>

2、改良版：word-spacing来替代&emsp

//相当于直接用&emsp，可以更精细的设置字体的空白距离
//但：字体需要留空白，且word-spacing需要手动调合适的值：稍有改良，不够智能
<p style="word-spacing:30px;">密 码</p>
<p style="word-spacing:15px;">用 户 名</p>
<p style="word-spacing:10px;">身 份 证 号</p>

3、现代版：text-align:justify

text-align:justify【只能处理，非最后一行，的行文本对齐方式】
所以，这里采用:after增加一行，作为最后一行。这样我们原来的文本就不是最后一行啦
问题：最后一行虽然内容为空，为' '，因为父容器有line-height:所以也是会占用一定空间的
解决方式：父容器设置height，及;ine-height==height，这样我们原先文本就会居中。
及增加 overflow: hidden;让after增加的那一行超出隐藏

<p class="text-justify" style="width:200px;">密码</p>
<p class="text-justify" style="width:200px;">用户名</p>
<p class="text-justify" style="width:200px;">身份证号</p>

.text-justify{
    text-align: justify;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}
.text-justify:after{
    content: '';
    display: inline-block;
    width: 100%;/*设置100%,才会被挤下去，出现两行。即不要和原来文本在同一行*/
}

效果图

兼容版

.text-justify{
    text-align: justify;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-justify: inter-ideograph; /* IE 6-7 */
    *zoom: 1; /* IE 6-7 触发 hasLayout 使一行也能两端对齐 */
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    text-align-last: justify;/* IE 8+ */
}
.text-justify:after{
    content: '';
    display: inline-block;
    width: 100%;
}

二、:before，:after伪类与动画=>content内容可以实现动画

:before，:after有content属性
所以，:before，:after如果单独执行某个动画，则该动画内修改content值是会生效的
即可以实现动态内容

• 玩转方式1：动画中，改变content内容。
• 玩转方式2：content内容早写好，动画切换content可视的内容

应用1：纯css实现的...动画

.dot-animation::after {
    content: '...';
    animation: dot-animation 3s infinite  both;
}

@keyframes dot-animation {
    33% { content: '.'; }
    66% { content: '..'; }
    99% { content: '...'; }
}

<span class="dot-animation">加载中</span>

应用2：纯css实现的倒计时

.count-down-10::after {
    content: '';
    animation: count-down-animation 10s backwards;
}

@keyframes count-down-animation{
    0% { content: '10'; }
    10% { content: '9'; }
    20% { content: '8'; }
    30% { content: '7'; }
    40% { content: '6'; }
    50% { content: '5.'; }
    60% { content: '4'; }
    70% { content: '3'; }
    80% { content: '2'; }
    90% { content: '1'; }
    100% { content: '0'; }
}

3、content的其它玩法：针对content的显示内容宽度是一致的 √

• content写很多内容。
• 水平方向：以空格隔开(再设置字体大小，控制只能显示每1小段的内容，其它内容被挤下去下一行)
• 垂直方向：设置样式height，且line-height==height；
• 伪类内执行动画(也可以逐帧动画)，执行上下移动，切换视图能看到的内容
• 知识补充：伪类内执行的动画的百分比是相当于伪类来的。在这里即把伪类高度100%f分成多部动画完
• 例子：纯css实现的计时器，跳转查看效果
  360截图-8051196.jpg

.timer{
    width: 100px;/*视图的宽度*/
    height: 100px;/*视图的高度*/
    line-height: 100px;/*让每一行垂直居中*/
    text-align: center;/*让每一行水平*/
    overflow: hidden;/*after伪类内容，超出隐藏*/
}
.timer::after{
    content:'00 01 02 03 04 05 06 07 08 09';/*after伪类内容*/
    font-size: 60px;/*字体大小。调节字体大小或timer的width。来确保content空格风格的内容放不下一行，把他们挤下下一行*/
    animation: counter 10s infinite  steps(10,start) forwards;/*执行动画，使伪类上下移动，即切换视图的内容*/
    /* nimation: counter 10s infinite linear */
    display: block;/*这里要是block或inline-block。因为动画对行内元素无效！*/
}

@keyframes counter {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(-100%);/*注意这里：伪类内的百分比是相对于伪类自身的。*/
        transform: translateY(-100%);/*在这里。即伪类100%高度，分成10步逐帧动画*/
    }
}

三、