css 有兩個說不上常用的偽類 :before 和 :after，偶爾會被人用來新增些自定義格式什麼的，但是它們的功用不僅於此。前幾天發現了 creative link effects 這個非常有意思的介紹創意鏈結特效的頁面，裡面驚人的效果大量使用到的特性除了 transform 屬性進行變形之外，就是接下來要介紹的這兩個偽元素了。
一 基本語法
在了解高階的應用之前，先來了解一下語法規則。平常僅僅需要將這兩個偽元素用於新增一些自定義字元時，只需使用偽類使用的單冒號寫法，以保證瀏覽器的相容性：
html**
p:before {}
不過，在 css3 中為了區別偽元素和偽類為偽元素使用了雙冒號，因此如果使用了 display 或者 width 等屬性時使得顯示脫離了原本元素後，建議按照標準雙寫。過於老的瀏覽器可能會存在支援問題，不過偽元素大多是配合 css3 使用，就無所謂向下相容了：
html**
img::after {}
這兩個偽類下特有的屬性 content ，用於在 css 渲染中向元素邏輯上的頭部或尾部新增內容。注意這些新增不會改變文件內容，不會出現在 dom 中，不可複製，僅僅是在 css 渲染層加入。比較有用的是以下幾個值：
[string] - 使用引號包括一段字串，將會向元素內容中新增字串。示例：
html**
a:after
attr() – 呼叫當前元素的屬性，可以方便的比如將的 alt 提示文字或者鏈結的 href 位址顯示出來。示例：
html**
a:after
url() / uri() – 用於引用**檔案。示例：
html**
h1::before
counter() – 呼叫計數器，可以不使用列表元素實現序號功能。具體請參見 counter-increment 和 counter-reset 屬性的用法。示例：
html**
h2:before
二 高階技巧
清除浮動是乙個時常會遇到的問題，不少人的解決辦法是新增乙個空的 div 應用 clear:both; 屬性。現在，無需增加沒有意義的元素，僅需要以下樣式即可在元素尾部自動清除浮動：
html**
.clear-fix
.clear-fix:after
三 特效妙用
除了簡單的新增字元，配合 css 強大的定位和特效特性，完全可以達到給簡單的元素另外附加最多兩個容器的效果。有一點需要注意的是，如果不需要內容僅配合樣式屬性做出效果，內容屬性也不能為空，即 content:」」 。否則，其他的樣式屬性一概不會生效。
懸浮出現方括號
懸浮出現方括號
滑鼠移上鏈結，出現方括號：
html**
a a:hover::before, a:hover::after
a:hover::before
a:hover::after
同樣，我們只需要配合 display: block 和 position: absolute ，就可以將其當成兩個容器，拼合成懸浮出現雙邊框的特效：
html**
a /* 大框 */
a:hover::before, a:hover::after
/* 小框 */
a:hover::after
用 :before 和 :after 偽類結合更多 css3 強大的特性，還可以完成非常多有意思的特效和 hack ，這裡權當拋磚引玉，諸位又能想出什麼妙用呢？
原文：
你所不知道的 const
const 常量是不可修改的，也就是說only read，例如 const int nbuffsize 512 nbuffsize 0 error就是因為const 常量不能修改，所以定義時必須初始化預設在全域性作用域中定義的非const變數可以在整個程式中訪問，例如 int ncounter ex...
你所不知道的background
今天要說說css中background這個屬性裡面的大學問。在乙個宣告中設定所有的背景屬性 body 看到這串 你怕了嗎？知道他們都代表啥意思嘛？不要捉急，來看展開式。展開式 background color設定元素的背景顏色，不能設定到外邊距，可以繼承父級的背景顏色，預設為透明。backgroun...
你所不知的IP位址管理
ip位址管理基本理念 順暢的企業網路依賴於良好的ip位址管理。隨著網路以及it設施 例如voip 雲計算 伺服器虛擬化 桌面虛擬化 ipv6和服務自動化等 複雜性的增加使網路團隊需要選擇使用自動化ip位址管理 ipam 的工具，自動化ip位址管理工具可以讓管理員管理網域名稱，分配子網 分配 追蹤 審...