CSS2 伪元素 :after/:before


:after/:before 最早出现于 CSS2 。

浏览器支持

:after / :before
IE8+ 及所有浏览器都支持
注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持。
若想兼容 IE6/7 浏览器,只需把冒号去掉,即

span after,//兼容 ie6/7
span:after{}//兼容 ie8及以上

定义

:before – 选择器在被选元素的内容前面插入内容,使用 content 属性来指定要插入的内容。
:after – 选择器在被选元素的内容后面插入内容,使用 content 属性来指定要插入的内容。
content 属性可以有以下几个值:

  • String – 使用引号包括一段字符串,将会向元素内容中添加字符串。
  • <style>
    	a:after { content: "我在后面";}
    	a:before { content: "我在前面";}
    </style>
    <body>
    	<a href="">  一千零一站  </a>
    </body>
    
  • attr() – 调用当前元素的属性,可以方便的将图片的 Alt 提示文字或者链接的 Href 地址显示出来。
  • <style>
    	a:before {
    		content: "{"attr(href)"}";
    	}
    	a:after {
    		content: "["attr(href)"]";
    	}
    </style>
    <body>
    	<a href="http://www.yqlyz.com">  - 一千零一站 -  </a>
    </body>
    
  • url() / uri() – 用于引用媒体文件。
  • <style>
    	a:before {
    		content: url(daohang/pyq.jpg);
    	}
    	a:after {
    		content: url(daohang/pyq.jpg);
    	}
    </style>
    <body>
    	<a href="http://www.yqlyz.com">  - 一千零一站 -  </a>
    </body>
    
  • counter() – 调用计数器,可以不使用列表元素实现序号功能。

<< 详解 CSS 伪元素与伪类的区别 CSS2 伪元素 :after 清除浮动的影响 >>


没有账号? 忘记密码?

社交账号快速登录