002 - jquery.pseudo.js让IE6、7也能用:before/:after伪元素

最新推荐文章于 2021-06-24 10:26:23 发布

liguanjie8

最新推荐文章于 2021-06-24 10:26:23 发布

阅读量2.3k

点赞数

分类专栏： CSS 各种兼容

本文链接：https://blog.csdn.net/liguanjie8/article/details/71479463

版权

CSS 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

各种兼容

3 篇文章 0 订阅

订阅专栏

-----------html------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery.pseudo.js"></script>
</head>
<body>
    <p>我是p</p>
</body>
</html>
<h1>文件下载</h1>
链接：http://pan.baidu.com/s/1jIn3LZ4 密码：jupf

	-----------css 1------------

	p{
            width: 260px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #000066;
	}
	/********* 文字 ********/
        
        p:after，p .after{
            content: 'after';
            after:'after';   // 注意：想要什么文字就写什么文字上去
            color: #e43937;
        }
        p:before,p .before{
            content: 'before';
            before:'before';    // 注意：想要什么文字就写什么文字上去
            color: #e43937;
        }
        
-----------css 2------------
	p{
            width: 260px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #000066;
	}
	/********* 图标 ********/
        p{
            position: relative;
        }
        p:after,p .after{
            content: '';
            after:' ';  /* 注意：此处若不想出现文字，则必须加一个空格额 */
            display: block;
            width: 10px;
            height: 10px;
            border: 2px dotted #e43937;
            position: absolute;
            top: 3px;
            left: 10px;
        }
        p:before,p .before{
            content: '';
            before: " ";  /* 注意：此处若不想出现文字，则必须加一个空格额 */
            display: block;
            width: 10px;
            height: 10px;
            border: 2px dotted #e43937;
            position: absolute;
            top: 3px;
            right: 10px;
        }