你們好,我給你們介紹一下,這是CSS僞元素:before與:after

以前對於CSS僞元素的應用並很少,最近在用一款建站系統爲客戶作企業門戶網站時,發現網頁HTML代碼中常常出現::before和::after。後經查資料才瞭解,這都是CSS的爲元素。CSS 僞元素用於向某些選擇器設置特殊效果。因此本文將和你們一塊兒分享交流CSS的僞元素的使用知識。css



基本語法

所謂的僞元素,顧名思義他們並非真正的HTML元素。::before與::after用於向目標元素裏內容的前面或後面添加內容。也許你已經注意到了,爲何before與after的前面一會單個冒號,一會又兩個冒號,有什麼區別麼?其實也沒什麼區別,只是CSS3中爲了區別他們在HTML代碼與CSS代碼裏的表現形式,將html中的僞元素顯示爲雙冒號。在書寫CSS代碼時,若是不考慮過舊的瀏覽器兼容問題,不管是用單冒號仍是雙冒號,結果都是同樣的。html


這裏要強調注意的是,這裏所說的「前」與「後」,是指目標元素裏面的內容的先後,而不是目標元素的先後。因此說,僞元素是目標元素的子元素。瀏覽器


咱們來看個示例:學習

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style type="text/css" media="screen">
 6   div:before{
 7     display:table;
 8     content:"在段落前面添加內容";
 9   }
10   a:after{
11     display:table;
12     content:attr(href);
13   }
14 </style>
15 </head>
16 <body>
17   <div>
18     <p>這裏是段落文本</p>
19     <a href="http://www.chanzhi.org">個人官網</a>
20   </div>
21 </body>
22 </html>

 

content是僞元素必不可少的一個屬性。用於設置要添加的內容。這個內容能夠是字符文本也能夠是目標元素自身的某屬性值。好比在上例中,a標籤內容後添加了href屬性值,即連接地址。顯示效果以下:網站



實例應用

僞元素的做用固然不會僅限於此,實際應用中,咱們能夠經過僞元素添加各類界面顯示特效。這裏咱們舉一個常見的清除浮動的例子。以前咱們不少朋友清除浮動的方法是底部添加一個空div,採用clear:both;的樣式。代碼以下:ui

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style type="text/css" media="screen">
 6   div.con_left,div.con_right{
 7     float:left;
 8   }
 9   .clear{
10     clear:both;
11   }
12 </style>
13 </head>
14 <body>
15   <div class="con_left"></div>
16   <div class="con_right"></div>
17   <div class="clear"></div>
18 </body>
19 </html>

 

如今經過僞元素,咱們能夠作的更簡便,不須要添加空元素。spa

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style type="text/css" media="screen">
 6   div.con_left,div.con_right{
 7     float:left;
 8   }
 9   .content{
10     display:table;
11     content:"";
12     width:0px;
13     clear:both;
14   }
15 </style>
16 </head>
17 <body>
18   <div class="content">
19   <div class="con_left"></div>
20   <div class="con_right"></div>
21   </div>
22 </body>
23 </html>

 

小結:

經過:before與:after僞元素,咱們能夠在CSS中設計出更多的樣式特效。本文咱們一塊兒分享交流了僞元素的使用,若是你們在平時實際應用過程當中有更好的案例,歡迎和你們一塊兒分享交流。咱們共同窗習,共同交流,共同進步。設計



相關文章
相關標籤/搜索