:before和 :after

偽元素將會(huì)在內(nèi)容元素的前后插入額外的元素，:before將會(huì)在內(nèi)容之前“添加”一個(gè)元素而:after將會(huì)在內(nèi)容后“添加”一個(gè)元素。在它們之中添加內(nèi)容我們可以使用content屬性。

.one:before {
  position:relative;
  content:open-quote;
}
.one:after {
  position:relative;
  content:close-quote;
}

上面的代碼片段將在文字的之前和之后分別添加添加一個(gè)引號(hào)：

事實(shí)上偽元素表現(xiàn)上就像是“真正”的元素，我們能夠給它們添加任何樣式，比如改變它們的顏色、添加背景色、調(diào)整字體大小、調(diào)整它們中的文本等等。

.one:before {
  position:relative;
  content:open-quote;
  color:#fce;
  font-size:24px;
}
.one:after {
  position:relative;
  content:close-quote;
  color:#fce;
  font-size:24px;
}

現(xiàn)在我們用它來制作一個(gè)逼真的陰影:

<div class="shadow shadow-1">
        <p>text-1</p>
</div>

先來設(shè)置好容器的樣式：

.shadow {
    width: 350px;
    height: 150px;
    background: #fff;  
    margin: 50px auto;
    position: relative;
}
.shadow p {
    text-align: center;
    line-height: 150px; 
}

之后，用:before 生成左邊的陰影：

.shadow-1:before, .shadow-1:after {
    position: absolute;
    top: 130px;
    content: "";
    width: 200px;
    height: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
    z-index: -1;
}
.shadow-1:before {
    left: 5px;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

它們都是絕對定位，使用負(fù)z-index來放置到圖片后方實(shí)現(xiàn)陰影效果。利用rotate旋轉(zhuǎn)投影。
這時(shí)，制作右邊的陰影就很簡單了：

.shadow-1:after {
    right: 5px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
}

：使用單冒號(hào)或者雙冒號(hào)有差嗎？
：無論你使用單冒號(hào)還是雙冒號(hào)，瀏覽器都將能識(shí)別它們。由于IE8只支持單冒號(hào)的格式，安全起見如果你想要更廣泛的瀏覽器兼容性那么還是使用單冒號(hào)的格式吧！