:before（或:after）是什么玩意？
答：伪元素（注意，不是伪类）。它虽然被收录到css3标准中，但其实主流浏览器都已经支持伪元素了，这其中包括了IE8+。
伪元素实际上在html dom中不存在，但会被浏览器渲染成html的一个节点，比如题主提到的#twitter:before，就是在#twitter这个标签里的开始处插入了一个子元素（节点），同理，:after是在该元素的最后插入子元素，它与以下html具有相同的效果：
<div id="twitter"> <span></span><!-- 或者一个div --> ..... </div>