1、第一个步骤http://jquery.lukelutman.com/plugins/pseudo/ 下载 jq-pseudo.js
下载好了，就引入jQuery和jq-pseudo.js
2、书写选择器的语法：
选择器:before, 选择器 {

/*兼容IE6、IE7*/
   before: '要写的内容';
   /*兼容IE8*/
   content: '要写的内容';

}
对伪元素进行设置样式：
选择器:before, 选择器 .before {
         书写样式       
}
demo：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <title>Basic Example - jQuery Pseudo Plugin</title>
 5         <script type="text/javascript" src="jquery.js"></script>
 6         <script type="text/javascript" src="jquery.pseudo.js"></script>
 7         <script type="text/javascript">
 8             $(function(){
 9                 $('#on').bind('click', function(e){
10                     $('body').addClass('toggle');
11                     e.preventDefault();
12                 });
13                 $('#off').bind('click', function(e){
14                     $('body').removeClass('toggle');
15                     e.preventDefault();
16                 });
17             });
18         </script>
19         <style type="text/css">
20
21             p:before, p {22                 before: 'foo ';
23                 content: 'foo '; }
24
25             p:after, p {26                 after: ' bar';
27                 content: ' bar'; }
28
29             p:before, p .before {30                 color: blue; }
31
32             p:after, p .after {33                 color: red; }
34
35         </style>
36     </head>
37     <body>
38         <h1>Basic Example - jQuery Pseudo Plugin</h1>
39         <p>&laquo; <a href="index.html">Back to the jQuery Pseudo Plugin</a></p>
40         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
41         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
42         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
43     </body>
44 </html>

转载于:https://www.cnblogs.com/front-end-develop/p/5754213.html

解决ie7不支持after、before的方法相关推荐

  1. 解决Chrome不支持NPAPI插件的方法(贴吧旺旺等)

    2019独角兽企业重金招聘Python工程师标准>>> Chrome浏览器42以上版本已经陆续不再支持NPAPI插件,也就是说,目前的迅雷插件.FLASH插件.支付宝插件.阿里旺旺插 ...

  2. 解决win2003不支持FLV播放的方法

    今天传FLV播放器和FLV文件的时候发现2003不是默认支持FLV文件的,直接打开MIME加了几次还是没有成功.google了一下才找到方法. 原因是由于windows server 2003上并没有 ...

  3. 解决IE8不支持数组的indexOf方法

    今天,测试报过来一个js bug, 在IE8下有个js错误,但是在其它浏览器下(Firefox, Chrome, IE9)下面都很正常. 后来调试发现原因是在IE8下, js数组没有indexOf方法 ...

  4. 两种解决IE6不支持固定定位的方法

    有两种让IE6支持position:fixed 1.用CSS执行表达式 *{margin:0;padding:0;} * html,* html body{ background-image:url( ...

  5. 如何解决对象不支持此属性或方法

    开始-运行 输入regsvr32 jscript.dll 确定 再输入regsvr32 vbscript.dll 确定 刷新 重进 ok. 前提是你的代码要正确!

  6. ie浏览器不支持java_解决IE屏蔽Java Applet问题的方法 .

    利用Java虚拟机程序来实现,一般通过在IE中设置ActiveX控件启用选项即可解决. 什么是ActiveX控件? ActiveX是Microsoft对于一系列策略性面向对象程序技术和工具的称呼,其中 ...

  7. calc ie支持_让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    让IE6/IE7/IE8支持CSS3属性的8种方法介绍 发布时间:2013-09-23 10:43:06   作者:佚名   我要评论 IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现 ...

  8. IE对象不支持此属性或方法: this.indexOf 的解决方法

    函数说明: js中的indexOf方法的作用是: 根据给定参数x返回目标字符串(可以看成字符的数组)或数组中与x相等的项的索引. 这个方法相当有用,很多编程语言中都有相对应的实现,javascript ...

  9. phalcon: 解决php7/phalcon3.2以上版本，不支持oracle数据库的方法

    phalcon: 解决php7/phalcon3.2以上版本,不支持oracle数据库的方法 参考文章: (1)phalcon: 解决php7/phalcon3.2以上版本,不支持oracle数据库的 ...

最新文章

  1. Ruby一些小case总结
  2. JAVA——RSA加密【X509EncodedKeySpec、PKCS8EncodedKeySpec、RSAPublicKeySpec、RSAPrivateKeySpec】
  3. 5.cocos2dx中关于draw绘图，声音和音效，预加载，播放与停止Vs暂停和恢复，音量控制
  4. Hystrix Health Indicator及Metrics Stream
  5. 从基础货币到资金到债券，固收市场的分层都在这了
  6. 老齐python-基础3(列表)
  7. 企业级应用框架（五）IOC容器在框架中的应用
  8. 你可能需要的网易前端三轮面经
  9. 学习手记（2021/3/19~?）
  10. autowired_@Autowired所有的东西！
  11. quartz中的corn表达式(转)
  12. mysql bean分页查询_javabean 来实现 MySQL 的分页
  13. 矢量图和Word：EPS，PDF，EMF和SVG
  14. 一文搞懂常见概率分布的直觉与联系
  15. CMD 控制台中文乱码
  16. word太大解决方法------图片压缩和visio图片批量压缩
  17. 恒生UFX交易接口基本介绍
  18. 小型数据集卷积神经网络CNN训练策略
  19. RationalDMIS 2020 编程技巧
  20. 量化交易8-backtrader回测道氏理论中反转形态K线形态图

热门文章

  1. GraphPad Prism 统计教程：简单线性回归原理
  2. Science：如何高效阅读文献？
  3. 计算机进桌面后反复重启,我的电脑一插网线就自动重启。到界面之后又马上重启。一直循环。...
  4. 仿个人税务 app html5_手机里发现这类APP，赶紧删！
  5. Python练习 | Python之图像的基本操作和处理
  6. C语言 | 基于MPU6050的卡尔曼滤波算法（代码类）
  7. 基于FFT的信号频谱分析
  8. C语言面向对象编程（二）：继承详解
  9. 并发量与RAID_RAID 技术全解 – RAID0、RAID1、RAID5、RAID10-宿主机磁盘阵列-香港母机...
  10. poweramp最完美设置_2020年感恩节，你最想感谢的人是谁？