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

時間 2019-11-15

原文原文鏈接

以前對於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>