伪元素 before after

用途

伪元素 ::before  和 ::after 用于一个给定元素的前面或者后面添加文字或者图片。
这些添加不会改变文档的内容，不会出现在dom结构中，不可复制，仅仅在css渲染层加入。

基本语法

 element ::before {}
 兼容写法：element：before{}  //ie8 仅支持 单冒号的写法 
 a:before { content: "↗"; }

相关属性：

• content

      使用引号包括一段字符串，将会向元素内容中添加字符串
     如果仅仅是配合样式属性做出效果，content属性也不能为空，即：content:""

• attr():

     调用当前元素的属性，比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来
    a:after { content:"(" attr(href) ")"; }

• url() / uri() – 用于引用媒体文件
  h1::before { content: url(logo.png); }

兼容

1、火狐 对 input 的伪元素 不支付
2、ie 9 、10 、11 对伪元素 的line-hight 不兼容 rem单位
3、有些浏览器不能对伪元素使用transitions 或 animations 动画

利用伪元素 和 动画 实现的 创意链接特效：http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-1