最近在項(xiàng)目中用到了::before和::after，之前對(duì)其接觸不深，用完之后才發(fā)現(xiàn)這兩個(gè)元素的作用真心贊！在這里記錄一下這兩個(gè)偽元素的具體用法吧，希望能幫助到有緣人！~~
介紹這兩個(gè)偽元素之前，不得不提與其混淆的另一個(gè)概念——偽類，偽類由單冒號(hào):和偽類名組成，比如:hover，:first-child等。而偽元素則是一類元素，用于插入內(nèi)容，它既不受文檔約束，也不影響文檔本身，只會(huì)影響最終的樣式。它的寫法有兩種，一種就是像偽類一樣用單冒號(hào):書寫，比如:before，:after等，這種寫法多見(jiàn)于CSS2的版本，僅用來(lái)兼容IE8；但是自從CSS3面世以來(lái)，偽元素的寫法就變成了雙冒號(hào)形式，比如這樣::before，::after。由于現(xiàn)代瀏覽器一般都支持雙冒號(hào)形式，所以我就以::before和::after作為標(biāo)題了，莫怪莫怪！

content屬性

::before和::after兩個(gè)偽元素?fù)碛幸粋€(gè)特有的屬性，那就是content，作用是在元素的頭部或尾部添加內(nèi)容，再重申一遍，這些內(nèi)容并不會(huì)出現(xiàn)在文檔流中，只不過(guò)會(huì)在CSS渲染層出現(xiàn)。通過(guò)MDN可以知道，content有以下幾個(gè)比較重要的屬性值（還有栗子）：

• [string] 添加一段字符串

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

// HTML
<p>Hello</p>

輸出：

Hello World

• attr() 調(diào)用當(dāng)前元素的屬性，并顯示出來(lái)

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

// HTML
<a href="http://m.itdecent.cn"></a>

輸出：

http://m.itdecent.cn

• url() 引用媒體文件，并顯示出來(lái) (CSS3試驗(yàn)性的屬性)

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

// HTML
<h1>這是logo</h1>

好了，上面介紹了這么多的content的屬性值，其實(shí)只不過(guò)是其最表面的用法，真正的奇技淫巧啊，就要靠大家的腦洞開(kāi)發(fā)出來(lái)了。

奇技淫巧一：清除浮動(dòng)

通常情況下，大家可能在需要清除浮動(dòng)的地方加入元素<div style="clear:both;"></div>來(lái)清除浮動(dòng)，但是這樣的做法不免會(huì)添加許多多余的空元素，而且也不利于后期代碼的維護(hù)工作，但是自從有了::after這個(gè)偽元素后，我們就可以用以下代碼來(lái)清除浮動(dòng)(簡(jiǎn)單易用)：

// CSS
// 為了兼容IE6和IE7，觸發(fā)haslayout
.clearfix { *zoom: 1; }
.clearfix:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
li {
    float: left;
}

// HTML
<ul class="box clearfix">
    <li>浮塊一</li>
    <li>浮塊二</li>
</ul>

奇技淫巧二：為引用內(nèi)容添加引號(hào)

這個(gè)技巧徹底地為大家展示了怎樣巧妙的配合 CSS 的特性，達(dá)到一個(gè)神奇的效果。。。

// 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
<blockquote>這是引用的內(nèi)容！</blockquote>

輸出：

引用

奇技淫巧三：添加各種動(dòng)畫效果（以光澤效果為例）

偽元素配合CSS3的動(dòng)畫，效果驚人?。?！

// 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
<button>閃光效果</button>

輸出效果如下：

閃光效果