:before和:after偽元素的用法
:before和:after偽元素的用法十分簡單；下面的代碼樣例中， :before 和 :after 將會在 blockquote 元素之前和之后插入新內容，它使用content屬性，也就是在內容上進行操作。
下面的代碼中一個引號標記將出現在blockquote元素的之前和之后。
blockquote:before { content: open-quote; } blockquote:after { content: close-quote; }
:before和:after偽元素的CSS樣式
:before和:after雖然是偽元素，但它們所有用法和行為表現和真正的元素幾乎完全一樣；我們可以對它們進行任何的CSS樣式設置，例如，改變它們的前景顏色，增加背景色/圖，調整字體大小，調整對齊方式等等。
blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; } blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: right; position: relative; bottom: 40px; }
:before和:after偽元素寬度和高度設置
:before和:after偽元素在頁面中生成的元素在缺省情況下是“內聯(inline)”元素，如果我們想指定它們的高度和寬度，需要首先定義它們為一個block元素，使用display: block;。
blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; border-radius: 25px; /** 定義成 block 元素 **/ display: block; height: 25px; width: 25px; } blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: right; position: relative; bottom: 40px; border-radius: 25px; /** 定義成 block 元素 **/ display: block; height: 25px; width: 25px; }
給:before和:after偽元素添加背景圖/背景色
我們不僅可以設置content的文字內容，而且可以給它添加圖片和背景圖片。盡管content 屬性直接支持url()語法來插入一個圖片，但在大多數情況下，我們更常用的是使用background屬性來控制圖片的顯示。
blockquote:before { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: left; position: relative; top: 30px; border-radius: 25px; background: url(images/quotationmark.png) -3px -3px #ddd; display: block; height: 25px; width: 25px; } blockquote:after { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: right; position: relative; bottom: 40px; border-radius: 25px; background: url(images/quotationmark.png) -1px -32px #ddd; display: block; height: 25px; width: 25px; }
然而，你也看到了，在上面的代碼片段中，我們仍然聲明了content屬性，並設置它的值為空字符串。這個content屬性，在這里是必須的，如果沒有它，這些偽元素將不能正常顯示。
將:before和:after偽元素和偽類(pseudo-classes)混合使用
盡管偽元素和偽類是不同的東西，但我們可以將它們在同一個CSS規則里混合使用，例如，如果你想要這樣的一個效果：當鼠標移動到blockquote元素上時，由偽元素生成的“引號”的顏色變深，下面的代碼就可以達到這樣的效果。
blockquote:hover:after, blockquote:hover:before { background-color: #555; }