你所不知道的伪元素用法——::before和::after

最近在项目中用到了::before和::after，之前对其接触不深，用完之后才发现这两个元素的作用真心赞！在这里记录一下这两个伪元素的具体用法吧，希望能帮助到有缘人！~~
介绍这两个伪元素之前，不得不提与其混淆的另一个概念——伪类，伪类由单冒号:和伪类名组成，比如:hover，:first-child等。而伪元素则是一类元素，用于插入内容，它既不受文档约束，也不影响文档本身，只会影响最终的样式。它的写法有两种，一种就是像伪类一样用单冒号:书写，比如:before，:after等，这种写法多见于CSS2的版本，仅用来兼容IE8；但是自从CSS3面世以来，伪元素的写法就变成了双冒号形式，比如这样::before，::after。由于现代浏览器一般都支持双冒号形式，所以我就以::before和::after作为标题了，莫怪莫怪！

content属性

::before和::after两个伪元素拥有一个特有的属性，那就是content，作用是在元素的头部或尾部添加内容，再重申一遍，这些内容并不会出现在文档流中，只不过会在CSS渲染层出现。通过MDN可以知道，content有以下几个比较重要的属性值（还有栗子）：

• [string] 添加一段字符串

// CSS
p::after {
    content: 'World';
}

// HTML
Hello

输出：

Hello World

• attr() 调用当前元素的属性，并显示出来

// CSS
a::before {
    content: attr(href);
}

// HTML

输出：

http://www.jianshu.com

• url() 引用媒体文件，并显示出来 (CSS3试验性的属性)

// CSS
h1::before {
    content: url(logo.png);
}

// HTML
这是logo

好了，上面介绍了这么多的content的属性值，其实只不过是其最表面的用法，真正的奇技淫巧啊，就要靠大家的脑洞开发出来了。

奇技淫巧一：清除浮动

通常情况下，大家可能在需要清除浮动的地方加入元素

来清除浮动，但是这样的做法不免会添加许多多余的空元素，而且也不利于后期代码的维护工作，但是自从有了::after这个伪元素后，我们就可以用以下代码来清除浮动(简单易用)：

// CSS
// 为了兼容IE6和IE7，触发haslayout
.clearfix { *zoom: 1; }
.clearfix:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
li {
    float: left;
}

// HTML

    
浮块一
    
浮块二

奇技淫巧二：为引用内容添加引号

这个技巧彻底地为大家展示了怎样巧妙的配合 CSS 的特性，达到一个神奇的效果。。。

// CSS
blockquote {
    position: relative;
    text-align: center;
    font-size: 30px;
}
blockquote::before, blockquote::after {
    position: absolute;
    font-size: 90px;
    font-family: serif;
    font-weight: bolder;
    line-height: 1;
    top: 0;
}
blockquote::before {
    content: open-quote;
    left: 0;
}
blockquote::after {
    content: close-quote;
    right: 0;
}

// HTML
这是引用的内容！

输出：

引用

奇技淫巧三：添加各种动画效果（以光泽效果为例）

伪元素配合CSS3的动画，效果惊人！！！

// CSS
button {
    background: orangered;
    color: #fff;
    border: none;
    padding: 0 25px;
    border-radius: 8px;
    line-height: 32px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    position: relative;
    left: 50%;
    top: 50px;
    transform: scale(1, 1) translate(-50%, -50%);
    transition: all .5s cubic-bezier(0.67, -0.51, 0.42, 1.43);
}
button::after {
    content: '';
    width: 40px;
    height: 200%;
    position: absolute;
    top: -50%;
    left: -50%;
    background: linear-gradient(to right, rgba(229, 172, 142, 0), rgba(255,255,255,0.6) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(30deg);
}
button:hover::after, button:focus::after {
    animation: sheen 1s forwards .5s;
}
button:hover {
    transform: scale(2, 2);
}
@keyframes sheen {
    100% {
        left: 150%;
    }
}

// HTML
闪光效果

输出效果如下：

闪光效果

好啦，以上就是本人最近对 ::before和 ::after两个伪元素的粗浅理解，望各位指正！