::before和::after伪元素

前一段时间在玩 CSS 动画，真好玩啊。收集在了Animate上，很有意思，很炫酷。

读了源码，发现代码里大量使用了 ::before 和 ::after 伪元素。之前看 CSS 文档的时候，记得有 CSS 伪类，那么伪元素和伪类有什么关系呢？

CSS3中为了区别伪元素和伪类元素而使用了双冒号。所以在使用CSS3动画时建议使用新版本的浏览器。

    .outer::before {
        content: "";
        width: 200px;
        height: 200px;
        display: block;
        position: absolute;
        border: 2px solid rgba(161, 164, 176, 0.7);
        border-radius: 50%;
        top: -2px;
        left: -2px;
        box-sizing: border-box;
        clip: rect(0px, 21px, 54px, 0px);
        animation: rotate infinite;
        animation-duration: 4s;
        animation-timing-function: ease-in-out;
    }

看这段 CSS 可以发现 ::before 伪元素下有一个特有的属性content 。
在 w3school 上对 content 属性是这样说明的：

content 属性用来生成内容。在默认情况下是行内内容，不过该内容常见的类型可以用属性 display 来控制。

之前有提到过，当行内元素的 display 属性设置成 block 来实现块级化。所以在上代码中使用了 display:block; 。

同时，在这段代码中也使用了 box-sizing 属性，当box-sizing: border-box; 时，此元素的内边距和边框将不会增加它的宽度。

基本用法

前文中提到，两个伪类下的 content 属性，用于在 CSS 渲染中向元素的逻辑上的头部或尾部添加内容，这些添加不会改变文档内容，也不会出现在DOM中，不可复制，仅仅是在CSS渲染层中加入。在张鑫旭的这篇博客对伪元素算在文档内容里有实例解答。常用的有以下几个值：

值	说明
String	设置Content到指定的文本
attr()	调用当前的属性，可以方便的将图片的alt或者链接的href地址显示出来
url()	引用媒体文件
counter()	调用计数器，可以不使用列表元素实现序号功能。

更多用法大家可以自己去写一下。或查阅 runoob上的文档。

在动画特效中的使用

在动画特效中，我们需要将 content 设置成 “”，然后配合position: absolute; 和 display: block; 就能是 after 和 before 形成两个容器，通过对这两个容器的操作，就可以实现动画和特效效果。

例如图中这两个部分圆环。

HTML部分：

    <div class="outer-ring"></div>

CSS部分：

    .outer-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 240px;
        height: 240px;
        margin: -120px 0px 0px -120px;
        background-color: transparent;
        border-radius: 50%;
        border: 6px solid transparent;
    }

    .outer-ring:before {
        content: "";
        display: block;
        position: absolute;
        top: -6px;
        left: -6px;
        width: 240px;
        height: 240px;
        border: 6px solid rgba(161, 164, 176, 0.5);
        border-radius: 50%;
        clip: rect(100px, 241px, 127px, 207px);
        animation: rotate3603 3s cubic-bezier(0.34, 0.07, 0.68, 0.93) infinite;
    }
    .outer-ring:after {
        content: "";
        display: block;
        position: absolute;
        top: -6px;
        left: -6px;
        width: 240px;
        height: 240px;
        border: 6px solid rgba(161, 164, 176, 0.5);
        border-radius: 50%;
        clip: rect(104px, 240px, 114px, 100px);
        animation: rotate3602 3s linear infinite reverse;
    }

从以上代码中我们可以看出，div 本身被设置成了透明属性的圆环，然后通过在 div 前后添加伪元素，实现两个圆环效果。分别使用 clip 属性将这两个圆环裁剪成不同的长短，同时添加不同的动画效果。最终就形成了两个围绕同一圆心旋转的部分圆环。

本文参考

作者：hayato
文章版权：本站所有文章版权依赖于 CC BY-NC-SA 3.0 Unported License
本文链接：https://blog.axis-studio.org/2017/02/01/浅谈before和after伪元素/