伪元素(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