僞元素(before after)的正確理解方式

本文章專門學習：after before

先上總結：

1. 僞元素能夠隨便用，由於它不干擾正常的頁面元素。

2. 僞元素主要是用來實現一些華麗叼炸天的顯示效果，而不是頁面佈局，固然 after+content 能夠清除頁面浮動.

3. 感受僞元素的用途其實比較的成熟或者固定，創新的用法一般正常人很難想出來，我的以爲只須要熟悉那些情景能夠用，怎麼用就能夠。

---

以前一直傻傻分不清什麼是僞元素，什麼是僞類。

• 僞元素 :after,:before

• 僞類 :hover :active

參考資料

到底什麼是僞元素

1.他們是假的元素，不存在的元素，更不是隱藏的元素
2.僞元素將會在內容元素的先後插入額外的元素，所以當咱們添加它們時，使用如下的標記方式，他們在技術上是平等的。

簡單用法

<p>
<span>:before</span>
 This the main content.
<span>:after</span>
</p>

在引用的以前和以後分別添加添加一個引號。

blockquote:before {
 content: open-quote;
}
blockquote:after {
 content: close-quote;
}

僞元素也有樣式

很搞笑的是，僞元素雖然很僞，可是卻能夠正常的設置樣式（背景、文本大小），丫的頁面上卻什麼都看不出。

blockquote:before {
 content: open-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: left;
 position: relative;
 top: 30px;
 
}
blockquote:after {
 content: close-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: right;
 position: relative;
 bottom: 40px;
}

問題是：它能幹嗎？

關聯背景圖片

</pre>
blockquote:before {
 content: " ";
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 float: left;
 position: relative;
 top: 30px;
 border-radius: 25px;
 
 background: url(images/quotationmark.png) -3px -3px #ddd;
 
 display: block;
 height: 25px;
 width: 25px;
}
blockquote:after {
 content: " ";
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 
 background: url(images/quotationmark.png) -1px -32px #ddd;
 
 display: block;
 height: 25px;
 width: 25px;
}

結合僞類

blockquote:hover:after, blockquote:hover:before {
 background-color: #555;
}

添加過渡效果

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

三個酷到爆炸的DEMO

固然這裏面須要一個重要的CSS3屬性：box-shadow

CSS Box Shadow Effects - Demo
Image Stack Illusion
3D button