這篇文章主要講解了“怎么使用css偽元素before和after”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用css偽元素before和after”吧！

10多年的朝陽(yáng)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整朝陽(yáng)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“朝陽(yáng)網(wǎng)站設(shè)計(jì)”,“朝陽(yáng)網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

層疊樣式表(CSS)的主要目的是給HTML元素添加樣式，然而，在一些案例中給文檔添加額外的元素是多余的或是不可能的。事實(shí)上CSS中有一個(gè)特性允許我們添加額外元素而不擾亂文檔本身，這就是“偽元素”。

你一定聽說過這個(gè)詞，尤其是當(dāng)你一直關(guān)注著我們的教程。點(diǎn)此瀏覽原作者的其他文章

事實(shí)上，的確有一些CSS家族的成員(CSS選擇器)被分類為偽元素比如：:first-line, :first-letter, ::selection,  :before and :after。但是，就本文而言，我們將把我們探討的范圍限制在:before 和  :after這兩個(gè)元素上。因此，本文中的“偽元素”將特指這兩個(gè)偽元素(:before 和 :after)，我們將從基礎(chǔ)入手，來研究這個(gè)獨(dú)特的主題。

關(guān)于語(yǔ)法和瀏覽器支持

偽元素實(shí)際上在CSS1中就存在了，但是我們現(xiàn)在所討論的:before和:after則發(fā)布于CSS2.1中。在最初，偽元素的語(yǔ)法是使用“:”(一個(gè)冒號(hào))，隨著web的發(fā)展，在CSS3中修訂后的偽元素使用“::”(兩個(gè)冒號(hào))，也就是::before  和 ::after—以區(qū)分偽元素和偽類(比如:hover，:active等)

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

它是做什么的

簡(jiǎn)而言之，偽元素將會(huì)在內(nèi)容元素的前后插入額外的元素，因此當(dāng)我們添加它們時(shí)，使用以下的標(biāo)記方式，他們?cè)诩夹g(shù)上是平等的。

  :before  This the main content.  :after  

但是這些元素實(shí)際上并不在文檔中生成。它們將在外部可見，但是你將不會(huì)在文檔的源代碼中找到它們，因此，實(shí)際上它們是“虛假”的元素。

使用偽元素

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

舉例來說，下面的代碼片段將在引用的之前和之后分別添加添加一個(gè)引號(hào)。

blockquote:before {    content: open-quote;  }  blockquote:after {    content: close-quote;  }

偽元素樣式

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

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

指定偽元素尺寸

由于已經(jīng)設(shè)置float，所以無需設(shè)置display:black。

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;  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;  height: 25px;  width: 25px;  }

關(guān)聯(lián)背景圖像

我們也可以替換用圖片替換內(nèi)容而不是只有純文本。盡管content屬性提供了 url()來插入圖片,  但是在更多的實(shí)例中，我更傾向于使用背景(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;  }

然而，正如你能夠從上面的代碼片段中看到的，我們?nèi)耘f聲明了content屬性，而且此時(shí)使用了空字符串。content屬性是必須的而且應(yīng)該經(jīng)常被應(yīng)用。否則，偽元素?zé)o論如何都無法正常工作。

結(jié)合偽類

盡管有不同類型的偽X(偽元素、偽類)，我們可以使用偽類連同偽元素一起放入一個(gè)CSS規(guī)則中，例如，如果我們希望當(dāng)我們的鼠標(biāo)移到blockqoute上時(shí)，引號(hào)的背景色能夠略微變深。

blockquote:hover:after, blockquote:hover:before {  background-color: #555;  }

添加過渡效果

我們甚至可以在偽元素上應(yīng)用transition屬性來創(chuàng)建優(yōu)美的顏色過渡效果。

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

更多的靈感

為了激發(fā)你的靈感，我們已經(jīng)選擇了三個(gè)很酷的例子，可以在web設(shè)計(jì)上給你很多主意。

迷人的陰影(http://www.paulund.co.uk/creating-different-css3-box-shadows-effects)

在這個(gè)教程中 Paul Underwood 解釋了如何創(chuàng)建更加逼真和吸引人的陰影效果。

使用 偽元素:before 和 :after 。它們兩個(gè)都是絕對(duì)定位，而且使用負(fù)z-index來放置到圖片后方實(shí)現(xiàn)陰影效果。

3D按鈕

這是一個(gè)非常聰明的實(shí)現(xiàn)，利用偽元素結(jié)合CSS3 box-shadow 來繪制一個(gè)令人吃驚的3D按鈕，僅僅使用了CSS和單一的錨文本。偽元素:before  被用來在按鈕的左側(cè)添加數(shù)字“1”。

疊加圖像效果

使用偽元素來僅僅依靠一個(gè)圖片標(biāo)簽創(chuàng)建一個(gè)“凌亂的”疊加圖像效果也是可能的。偽元素用于建立一個(gè)圖片疊加的錯(cuò)覺，通過使用z-index負(fù)值使“疊加”的圖片在真正的圖片后面來實(shí)現(xiàn)。

感謝各位的閱讀，以上就是“怎么使用css偽元素before和after”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么使用css偽元素before和after這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！