CSS中伪元素after的作用

作用主要是利用伪元素装饰内容 (无论是装饰图片还是音效) 而不需要更改 HTML 的内容，从而帮助内容与样式更好地分离。因为如果仅仅为了画一个装饰用的三角就在 HTML 里多加一个元素，这上对于实际内容来说其实是多余的，对自动分析网页的语义也可能会产生不好的影响 (这取决于分析程序的具体实现)。
应该说，::before 和 ::after 伪元素的初衷还是用于插入内容——不受文档约束，也不影响文档本身（比如，不影响 DOM），只影响最终的样式。
CSS 规范中给的例子很典型：p.note:before { content: "Note: " } ——这种插入的内容本身其实不是真正的内容，其实是身为文本的样式，所以没必要在 HTML 中重复出现，交给 CSS 来生成会很不错。

不过目前最多见的应用情形的确是把它们用成 content: "" 这样的空元素，然后给这个空元素加上各种样式。这样来说利用的就只是它这个元素的「存在」了（而非元素的内容），已经是讨巧的 hacking 了。

　　
　　可以直接把伪元素理解成一个元素；
　　css可以对元素做的事，对这个伪元素都可以做，然后也不奇怪能做出个三角形了（三角形是用很宽的边框+内容宽高都为0做出来的）
　　但是，伪元素因为不在DOM里存在，也不会在调试工具里显示，所以不太好调试
　　伪对象:after还有一个重要的用法--清除浮动。
　　这种清除浮动的方法几乎成了一个固定的模式，很多大型网站里面都有用到。
　　以下代码：
　　.weibo-clearfix:after{clear:both;content:".";display:block;height:0;width:0;visibility:hidden;}