用途
伪元素 ::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