一、介紹
css3爲了區分僞類和僞元素，僞元素採用雙冒號寫法。
常見僞類——:hover,:link,:active,:target,:not(),:focus。
常見僞元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。
這些添加不會出現在DOM中，不會改變文檔內容，不可複製，僅僅是在css渲染層加入。
所以不要用:before或:after展示有實際意義的內容，儘量使用它們顯示修飾性內容，例如圖標。
舉例：網站有些聯繫電話，希望在它們前加一個icon☎，就可以使用:before僞元素，如下：
<!DOCTYPE html> <meta charset="utf-8" /> <style type="text/css"> .phoneNumber::before { content:'\260E'; font-size: 15px; } </style> <p class="phoneNumber">12345645654</p>
Note:這些特殊字符的html，js和css的寫法是不同的，具體可查看html特殊字符的html，js，css寫法彙總。
二、content屬性
::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認情況下，僞類元素的display是默認值inline，可以通過設置display:block來改變其顯示。
content可取以下值。
1、string
使用引號包一段字符串，將會向元素內容中添加字符串。如：a:after{content:""}
舉例：
<!DOCTYPE html> <meta charset="utf-8" /> <style type="text/css"> p::before{ content: "《"; color: blue; } p::after{ content: "》"; color: blue; } </style> <p>平凡的世界</p>
2、attr()
通過attr()調用當前元素的屬性，比如將圖片alt提示文字或者鏈接的href地址顯示出來。
<style type="text/css"> a::after{ content: "(" attr(href) ")"; } </style> <a href="http://www.cnblogs.com/starof">starof</a>
3、url()/uri()
用於引用媒體文件。
舉例：“百度”前面給出一張圖片，後面給出href屬性。
<style> a::before{ content: url("https://www.baidu.com/img/baidu_jgylogo3.gif"); } a::after{ content:"("attr(href)")"; } a{ text-decoration: none; } </style> --------------------------- <body> <a href="http://www.baidu.com">百度</a> </body>
效果：
4、counter()
調用計數器，可以不使用列表元素實現序號功能。
配合counter-increment和counter-reset屬性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
代碼:
<style> body{ counter-reset: section; } h1{ counter-reset: subsection; } h1:before{ counter-increment:section; content:counter(section) "、"; } h2:before{ counter-increment:subsection; content: counter(section) "." counter(subsection) "、"; } </style> ------------------------------------------------ <body> <h1>HTML tutorials</h1> <h2>HTML Tutorial</h2> <h2>XHTML Tutorial</h2> <h2>CSS Tutorial</h2> <h1>Scripting tutorials</h1> <h2>JavaScript</h2> <h2>VBScript</h2> <h1>XML tutorials</h1> <h2>XML</h2> <h2>XSL</h2> </body>
效果：
瞭解更多可參考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
三、使用
1、清除浮動
清除浮動方法有多種，現在最常用的就是下面這種方法，僅需要以下樣式即可在元素尾部自動清除浮動
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; }
2、模擬float:center的效果
float沒有center這個取值，但是可以通過僞類來模擬實現。
這個效果實現很有意思，左右通過::before float各自留出一半圖片的位置，再把圖片絕對定位上去。
核心css如下：
#page-wrap { width: 60%; margin: 40px auto; position: relative; } #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; } #l, #r { width: 49%; } #l { float: left; } #r { float: right; } #l:before, #r:before { content: ""; width: 125px; height: 250px; } #l:before { float: right; } #r:before { float: left; }
完整代碼如下：
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Float Both</title> <style> * { margin: 0; padding: 0; } body { font: 14px/1.8 Georgia, serif; } #page-wrap { width: 60%; margin: 40px auto; position: relative; } #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; } #l, #r { width: 49%; } #l { float: left; } #r { float: right; } #l:before, #r:before { content: ""; width: 125px; height: 250px; } #l:before { float: right; } #r:before { float: left; } </style> </head> <body> <div id="page-wrap"> <img src="img/cat.jpg" id="logo"> <div id="l"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p> </div> <div id="r"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p> </div> </div> </body> </html>
出自：https://css-tricks.com/float-center/
3、做出各種圖形效果
舉例：一個六角星
<style> #star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #star-six::after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; } </style> <body> <div id="star-six"></div> </body>
#star-six的div是一個正三角行，#star-six::after是一個倒三角形，通過絕對定位，調整其位置即可實現六角星的效果。
點我查看更多。
4、不使用圖片創建小圖標
舉例：比如一個電話
很巧妙的應用一個div左border加圓角當機身，::before和::after配合圓角當聽筒。
<style type="text/css"> #phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;} #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;} #phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;} </style> <div id="wraper"> <div id="phone"></div> </div>
更多圖標：
<!doctype html> <html> <head> <title>僞類標籤使用</title> </head> <style type="text/css"> #wraper{padding:10px;width:380px;height:380px;border:3px solid #ccc;margin:auto;} #power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;} #power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;} #play{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;} #play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;} #pause{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;} #pause:before{height:20px;width:5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;} #stop{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;} #stop:before{height:17px;width:17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;} #comment{width: 50px;height: 25px;margin:20px;border: 6px solid #EEB422;border-radius: 20%;position:relative;display: inline-block;background: #EEB422;} #comment:before{border:10px solid transparent;border-top:10px solid #EEB422;content: "";position: absolute;left:28px;top: 28px;} #comment:after{content: "....";position: absolute;color: #fff;font-size: 26px;top: -10px;left: 2px;} #like{width: 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;} #like:before{width:50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;} #search{width: 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;} #search:before{width:20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;} #home{width: 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;} #home:before{width:6px;height:12px;background:#fff;content: "";position: absolute;left:12px;top: 20px;} #home:after{border:25px solid transparent;border-bottom:20px solid #EEB422;content: "";position: absolute;top: -38px;left:-10px;} #photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;} #photo:before{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;} #photo:after{width:15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;} #photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;} #email{width:50px;height:35px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;} #email:before{border:25px solid transparent;border-top:20px solid #fff;content: "";position: absolute;left:0px;top: 2px;} #email:after{border:25px solid transparent;border-top:20px solid #EEB422;content: "";position: absolute;top:0px;} #file{width:30px;height:45px;border:4px solid #EEB422;margin:20px;position:relative;display: inline-block;top: 5px;} #file:before{border:10px solid #fff;border-right:10px solid #EEB422;border-bottom:10px solid #EEB422;content: "";position: absolute;left:-4px;top: -4px;} #file:after{width:20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;} #history{width:35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;} #history:before{width:14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;} #video{width:50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;} #video:before{width:6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;} #video:after{width:10px;height:10px;border:6px solid transparent;border-top:6px solid #EEB422;border-left:6px solid #EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:13px;top: 35px;} #tags{width:50px;height:25px;background:#EEB422;border-radius: 35% 0% 0% 35%;transform:rotate(45deg);-webkit-transform:rotate(45deg);margin:20px;margin-left:35px;position:relative;display: inline-block;top: -5px;} #tags:before{width:10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;} #phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;} #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;} #phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;} #profile{width: 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;} #profile:before{width: 20px;height:22px;background:#EEB422;border-radius:40%;content: "";position: absolute;left: 10px;top: -22px;} </style> <body> <div id="wraper"> <div id="power"></div> <div id="play"></div> <div id="pause"></div> <div id="stop"></div> <div id="comment"></div> <div id="like"></div> <div id="search"></div> <div id="home"></div> <div id="photo"></div> <div id="email"></div> <div id="file"></div> <div id="history"></div> <div id="video"></div> <div id="tags"></div> <div id="phone"></div> <div id="profile"></div> </div> </body> </html>
這個效果來自：http://www.w3cfuns.com/blog-5444604-5402127.html
有大神用僞元素創建了84種小圖標，具體可查看http://nicolasgallagher.com/pure-css-gui-icons/
5、顯示打印網頁的URL
<style> @media print { a[href]:after { content: " (" attr(href) ") "; } } </style><body> <a href="http://www.baidu.com">百度</a> </body>
6、給blockquote添加引號
經常用到給blockquote 引用段添加巨大的引號作爲背景，可以用 ：:before 來代替 background 。好處是即可以給背景留下空間，還可以直接使用文字而非圖片：
<meta charset="utf-8"/> <style type="text/css"> blockquote::before { content: open-quote; color: #ddd; z-index: -1; font-size:80px; } </style> <blockquote>引用一個段落,雙引號用::before僞元素實現</blockquote>
7、超鏈接特效
舉例：配合 CSS定位實現一個鼠標移上去，超鏈接出現方括號的效果
<meta charset="utf-8" /> <style type="text/css"> body{ background-color: #425a6c; } a { position: relative; display: inline-block; outline: none; color: #fff; text-decoration: none; font-size: 32px; padding: 5px 20px; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "\5B"; left: -10px; } a:hover::after { content: "\5D"; right: -10px; } </style> <a>鼠標移上去出現方括號</a>
更多創意鏈接特效可參考： Creative Link Effects 。
8、::before和::after實現多背景圖片
舉例：一個標籤應用5張背景圖
<meta charset="utf-8" /> <style type="text/css"> #silverback { position: relative; z-index: 1; min-width: 200px; min-height: 200px; padding: 120px 200px 50px; background: #d3ff99 url(img/vines-back.png) -10% 0 repeat-x; } #silverback:before, #silverback:after { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; padding-top: 100px; } #silverback:before { content: url(img/gorilla-1.png); padding-left: 3%; text-align: left; background: transparent url(img/vines-mid.png) 300% 0 repeat-x; } #silverback:after { content: url(img/gorilla-2.png); padding-right: 3%; text-align: right; background: transparent url(img/vines-front.png) 70% 0 repeat-x; } </style> <div id="silverback">一個標籤應用了5張背景圖片</div>
原效果來自：Multiple Backgrounds and Borders with CSS 2.1
這個效果看的真的是腦洞大開，雖然多背景圖用css3的background-image很容易就能實現。但是這篇文章是10年寫的，已經過去5年了，想想也正是他們這樣的嘗試和努力才加速了css3標準的制定，讓今天的開發更easy。今天的我們又能爲5年後的開發人員做些什麼貢獻呢？
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4459991.html有問題歡迎與我討論，共同進步。