css中:after与::after的区别

基本概念

1.他们都是CSS伪元素，与:hover/:active等伪类不一样。 
2.:before/:after伪元素是在CSS2中提出来的，所以兼容性可能到IE8了。 
3.::before/::after是CSS3中的写法，为了将伪类和伪元素区分开。但是平时为了兼容性，还是会用一个冒号的写法。

基本用法

p:after{} img:before{}1212

这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：

• [String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例： a:after { content: "↗"; }

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

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

• counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例： 
  h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

• 更多详细信息就在前端站www.qianduanzhan.com

转载于:https://my.oschina.net/u/3485593/blog/1154075