画出1px 的线

看到以前的代码复习一下。
点：1.画出1px的线,利用伪元素
2.利用animate第三方来做炫酷的特效
html:

 <div class="bottom">
            <div class="bottom_center">
                <img class="one" src="./images/logo.png" alt="">
                <div class="animated zoomInUp two">企业级区块链解决方案</div>
                <div class="animated zoomInDown three">Enterprise-Class Solution Based On Blockchain</div>
                <div class="four">
                    <i class="iconfont icon-yuandianxiao left"></i>
                    <i class="iconfont icon-yuandianxiao right"></i>
                    致力于服务中小型企业和机构，为中小型企业提供区块链技术支持和区块链行业解决方案
                </div>
            </div>
        </div>

css:

.page1 .bottom .bottom_center .four::before,
.page1 .bottom .bottom_center .four::after{
    content:"";/*内容为空*/
    display:inline-block;/*使得显示伪类的方式为行内块*/**
    border-top:1px solid aliceblue; /*1px的细线，也可以直接用宽高*/
    width: 100px;
    position: relative;/*通过相对定位的方式以自己的位置微调位置*/
    top:-6px;
    left:10px;
}

这里用的时伪元素，说到这里，之前面试被问到伪元素与伪类的区别，说说自己的理解
定义的区别：
伪类：伪类用于选择DOM数之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如：:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素比如:first-child，:first-of-type，：target。
伪元素：伪元素为DOM数没有定义的虚拟元素，不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。注意：需要给伪元素定义 content 值为空和定义伪元素为block才会正常显示伪元素，模拟为div元素。