CSS樣式表的主要作用是修飾Web頁面上的HTML標記，但有時候，為了實現某個效果而往頁面里反復添加某個HTML標記很繁瑣，或者是顯得多余，或者是由于某種原因而做不到。這就是CSS偽元素(Pseudo-Element)可以發揮作用的地方，所謂‘偽元素’，就是本身不存在的頁面元素，HTML代碼里并沒有這樣的元素，但在頁面顯示時，你卻能看到這些本來不存在的元素發揮著作用。

觀看演示

之前我們曾簡要的介紹過一些關于偽元素(Pseudo-Element)的文章，下面我們要詳細的再說一下。

事實上，偽元素在CSS里是一系列的元素，比如:first-line, :first-letter, ::selection, :before 和 :after，但在本文中，我們將只講解 :before 和 :after 這兩個。讓我們先了解一下這種技術的基本知識。

偽元素語法

早在CSS1里就已經有了偽元素的概念，但我們今天要說的 :before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規范里，偽元素的語法被修改成使用雙冒號，成為::before & ::after – 這個樣子，用來跟“偽類(pseudo-classes)”區分開，(例如 :hover, :active, 等)。

瀏覽器對偽元素的支持

然而，不論你使用單冒號還是雙冒號語法，瀏覽器都能識別。因為IE8只支持單冒號的語法，所以，如果你想兼容IE8，保險的做法是使用單冒號。

:before和:after偽元素能干嘛？

簡言之，這兩個偽元素會在真正頁面元素之前和之后插入一個額外的元素，從技術角度上講，它們與下面的HTML標記是等效的。

:before 這里是真正元素的內容:after

在Web頁面的HTML源代碼里，你實際上找不到它們，但從視覺上，你卻能看到它們的存在，所以我們用這個“偽”字就是表示它們假元素。

: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;}

增加變化的過渡效果

我們甚至可以使用 transition 屬性來創建一個優雅的顏色過渡效果。

transition: all 350ms;-o-transition: all 350ms;-moz-transition: all 350ms;-webkit-transition: all 350ms;

觀看演示

目前大多數瀏覽器(火狐，谷歌瀏覽器，IE11)都支持偽元素的這種用法，但IE8/6肯定是不支持這些偽元素的特殊用法的，但隨著使用這種老式瀏覽器的用戶越來越少，我們就可以普遍使用這些最先進的CSS的偽元素用法，讓web頁面變得更漂亮，讓Web用戶體驗更加愉悅。

總結

以上是生活随笔為你收集整理的修改after样式_理解：Before和：After伪元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。