CSS before, after

前陣子同事給我看了這個：Pure CSS GUI icons
裡面結合了CSS的before & after及許多語法，畫出各種不同的icon。但由於畫icon這個技巧太困難了，所以本篇只能就before & after這兩個比較少人會用到的功能介紹一下(虛弱)。

  首先，先來介紹一下before & after的用法：
在目標元素的最前方/最後方放置額外的CSS元素。要注意的是最前方/最後方的意思，就直接用程式碼來看一下這是什麼意思吧。我們的CSS長的這樣：

p.box {
   width: 300px;
   border: solid 1px blue;
   padding: 20px;
}

p.box:before {
   content: "before";
   border: solid 1px blue;
   padding: 2px;
   margin: 0 10px 0 0;
}

And HTML:

<div class="box">原始元素</div>

而出來的結果會是這樣：

原始元素

有注意到其實before產生出來的元素，還是被包在<p>中間嗎？也因此你會看到box這個class的背景屬性一樣套用到:before元素之內。他們仍然都是屬於同一個元素，只是產生在元素內的最前方/最後方。這些產生出來的元素一樣可以套用各式各樣的CSS。

而before, after裡面一定要有一個叫做content的屬性，可以是文字(如前例)，也可以是圖像、超連結：

p:before {
   content: url(image.jpg);
}
a:after {
  content: attr(href);
}PS: attr(href)是取得選取元素的href屬性，在本例就是取得a的href屬性，詳細用法可以見此。

瀏覽器支援：

Before, after這兩個是CSS2.1中就有的功能，因此在瀏覽器的支援上算是滿廣泛的

• Chrome 2+,
• Firefox 3.5+ (3.0 部分支援),
• Safari 1.3+,
• Opera 9.2+,
• IE8+ (也算部份，有點小問題),
• 大部分行動裝置瀏覽器

TIPS:

1. 由於before, after是屬於pseudo-element，他本身不屬於DOM，因此在瀏覽器的DOM檢視中是看不到的 (不過firebug在1.8中已加入對pseudo-element的支援)。他們可以提供一些額外的效果，但是如果大量使用的話有可能造成debug上的問題，這點要多加注意。
2. 這裡有非常多的應用，有不少實用的效果。