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，保險的做法是使用單冒號。
簡言之，這兩個偽元素會在真正頁面元素之前和之後插入乙個額外的元素，從技術角度上講，它們與下面的html標記是等效的。
:before在web頁面的html源**裡，你實際上找不到它們，但從視覺上，你卻能看到它們的存在，所以我們用這個「偽」字就是表示它們假元素。這裡是真正元素的內容
:after
:before和:after偽元素的用法十分簡單；下面的**樣例中，:before和:after將會在blockquote元素之前和之後插入新內容，它使用content屬性，也就是在內容上進行操作。
下面的**中乙個引號標記將出現在blockquote元素的之前和之後。
blockquote:before blockquote:after
:before和:after雖然是偽元素，但它們所有用法和行為表現和真正的元素幾乎完全一樣；我們可以對它們進行任何的css樣式設定，例如，改變它們的前景顏色，增加背景色/圖，調整字型大小，調整對齊方式等等。
blockquote:before blockquote:after
:before和:after偽元素在頁面中生成的元素在預設情況下是「內聯(inline)」元素，如果我們想指定它們的高度和寬度，需要首先定義它們為乙個block元素，使用display: block;。
blockquote:before blockquote:after我們不僅可以設定
content的文字內容，而且可以給它新增和背景。儘管content屬性直接支援url()語法來插入乙個，但在大多數情況下，我們更常用的是使用background屬性來控制的顯示。
blockquote:before blockquote:after然而，你也看到了，在上面的**片段中，我們仍然宣告了
content屬性，並設定它的值為空字串。這個content屬性，在這裡是必須的，如果沒有它，這些偽元素將不能正常顯示。
儘管偽元素和偽類是不同的東西，但我們可以將它們在同乙個css規則裡混合使用，例如，如果你想要這樣的乙個效果：當滑鼠移動到blockquote元素上時，由偽元素生成的「引號」的顏色變深，下面的**就可以達到這樣的效果。
blockquote:hover:after, blockquote:hover:before我們甚至可以使用
transition屬性來建立乙個優雅的顏色過渡效果。
transition: all 350ms;目前大多數瀏覽器(火狐，谷歌瀏覽器，ie11)都支援偽元素的這種用法，但ie8/6肯定是不支援這些偽元素的特殊用法的，但隨著使用這種老式瀏覽器的使用者越來越少，我們就可以普遍使用這些最先進的css的偽元素用法，讓web頁面變得更漂亮，讓web使用者體驗更加愉悅。-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
**：
理解偽元素 Before 和 After
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上，的確有一些css家族...
理解偽元素 before 和 after
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上，的確有一些css家族...
理解before和after偽元素
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 關於語法和瀏覽器支援 偽元素實際上在css1中就存在了，但是我們現在所討論的 before和 after則...