兼容IE8及下after与before的jquery.pseudo.js的食用方式

最新推荐文章于 2021-08-03 20:27:30 发布

リュウな

最新推荐文章于 2021-08-03 20:27:30 发布

阅读量766

点赞数

分类专栏： BigFront-Base

本文链接：https://blog.csdn.net/larktears/article/details/106267351

版权

BigFront-Base 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一点：食用的时候需要注意，content属性是必不可少的，是要与after属性或before属性一起存在才可以产生效果的。
第二点：食用 &::after,&:after,&. after这样的语法会导致失效的，所以建议仅仅以&:after,& .after的方式食用以避免引起食物中毒。

2020-7-9更新：

IE8不需要jquery.pseudo.js文件，只要把 css3 ::after和 ::before 写法改成 css2 :after和:before 兼容性写法即可。里面放 content属性就可以，也不用再写 after:""和before:""属性；

IE7和IE6估计（没测试过）应该是需要的这个文件；

更新消息结束；

举个素子来说：

HTML代码块：
1. 首先引入CSS样式文件；
2. 再引入jQuery和jQuery.psedo.js两个文件；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<script src="../js/lib/jquery.pseudo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
	<span>test</span>
	<p>Hello</p>
</div>
</body>
</html>

Stylus代码块：
- after的写法是：X:after, X .after { content:"text"; after:"text";}；
- before的写法是：X:before, X .before { content:"text"; before:"text";}。

p{
	width: 260px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border: 1px solid #000066;
	&:after,& .after{
		content: 'c-after';
		after:'a-after';
		color: red;
	}
	&:before,& .before{
		content: 'c-before';
		before:'b-before';
		color: blue;
	}
}

span{
	display: block;
	width: 200px;
	&:before,& .before{
		content: '-c-before';
		before: '-b-before';
		color yellowgreen;
	}
	&:after,& .after{
		content: 'c-after';
		after: "a-after";
		color orange;
	}
}