CSS僞類:before 和 :after

CSS用了許久，對一些僞類熟視無睹，從不想着去搞清楚一下。好比說這個

:before
:after

其實，:before 表示該標記前面的樣式，反之 :after 表明設置後面的樣式。網頁上經常看到有些文字前或後有小圖標，用的就是這種樣式：

對應的代碼有：

<button type="button" class="btn text" onclick="Search();"><i class="icon-search"></i> 查詢</button>
<button type="button" onclick="clearSerach()" class="btn"><i class="icon-trash"></i> 清除</button>

圖標正是<i>這裏設置出來的。衆所周知，<i> 只是一個表明斜體的標記而已，之因此用在這裏，只是看中它不佔地方，方便設置:before :after 而已。

那究竟如何設置圖標呢？關鍵在於 content 這個CSS屬性。 content 表明插入內容，而且彷佛常跟:before :after 配對使用。像上面這個例子，就能夠是

.icon-search:before{ content: "\e000";/* 放大鏡符號 */ font-size: 16px; }

有關這個content屬性，還能夠對應許多內容，具體可參考
http://www.zhangxinxu.com/wordpress/2010/04/css-content%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E4%BB%A5%E5%8F%8A%E5%BA%94%E7%94%A8/

若是想將這些插入內容去掉怎麼辦呢？好比說，伸縮搜索框，按鈕未點擊前有「查找」二字，點擊後字消失：

代碼就能夠這樣寫：

.sb-icon-search:before { content: "\e000"; }

.sb-icon-search:after { content: "\20查\20找";/* \20 表明空格 */ color: #555; }

.sb-search.sb-search-open .sb-icon-search:after,
.no-js .sb-search .sb-icon-search:after { content: ""; }

將 content 設爲」「，就啥都沒有了。

源代碼下載