::before/:before和::after/:after的使用

　　之前总是可以看到::before :before ::after :after，但是没有使用过，今天查了些资料，终于知道了他们的关系和作用。下面做一总结。

第一部分：基础知识

　　1.与:active 和 :hover这些伪类不一样，他们都是伪元素。

　　2.:before/:after伪元素是在css2中提出来的。而::before/::after是在css3中的写法，这样从新提出是为了用两个冒号表示伪元素以区分伪类。

　　3.它们用在css里某个选择器之后，为了增添装饰性内容的，因为这样可以实现语义化，如果用html来添加一些没有实际内容的节点或者辅助式样本的文本，他们是毫无意义的。

　　4.它们有特有的属性content，其中添加的内容默认是内联元素。

　　5.创建的伪元素默认是在所依附的元素之上的，我们可以使用z-index:-1;把它放到下面去。

　　.它们是虚拟节点，而不是真正的节点。如：

        div::after{

            content: " ";

            border:thin solid red;

        }

我们在浏览器可以看到：

::after并不是一个真实节点，实际上我们在一些网站上经常可以看到它们的使用。

　　6.input，img，iframe等元素都不能包含其他元素，所以不能通过伪元素插入内容。　　

第二部分：应用

　　1.做间隔符。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪元素</title>

    <style>

        a{

            color:blue;

            text-decoration: none;

        }

        .log:after{

            content:"|";

            color:red;

        }

    </style>

</head>

<body>

    <a href="" class="log">登录</a><a href="">注册</a>

</body>

</html>

效果如下：

2.做三角形

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪元素</title>

    <style>

        a{

            color:blue;

            text-decoration: none;

        }

        .log:before{

            content:" ";

            display: inline-block;

            width: 0;

            height: 0;

            border:10px solid transparent;

            border-left: 10px solid red;

        }

    </style>

</head>

<body>

    <a href="" class="log">登录</a>

</body>

</html>

效果如下所示：

3.清除浮动(下面内容取自张鑫旭大神)

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>伪元素</title>

	<style>

	.box{padding:10px; background:gray;}

	.fix{*zoom:1;}

	.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}

	.l{float:left;}

	</style>

</head>

<body>

	<div class="box fix">

    <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />

</div>

</body>

</html>

　　效果如下：

　　注意：其中*zoom:1;是用来在IE6中清除浮动的（用在浮动元素的父元素上）。

　　在我的博文《使用css打造形形色色的形状！》一文中多处用到了伪元素，希望大家可以看看。

随机推荐

  1. [BZOJ 1260][CQOI2007]染色（DP）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1260 分析: f[i][j]表示i~j刷成s[i]~s[j]这个样子需要的最小次数 则 ...

  2. poj-1410 Intersection

    计算几何的题目, 学cv的要做一下.poj 地址: http://poj.org/problem?id=1410 题意:判断一个直线段,是否与一个矩形有相交点. 解决方案: 判断矩形的每一条边是否与直 ...

  3. 1116Xlinux初学习之正则表达式和通配符

    一.正则表达式: 元字符是用来阐释字符表达式意义的字符,简言之,就是用来描述字符的字符. 正则表达式RE(Regular Expression)是由一串字符和元字符构成的字符串. 正则表达式的主要功能 ...

  4. ScrollView内部元素如何做到fill_parent 或者 match_parent？

    转  : http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0704/1629.html ScrollView滚动视图是指当拥有很多 ...

  5. Shell命令_for

    chmod 755 demo.sh ./demo.sh 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  6. caffe使用

    训练时, solver.prototxt中使用的是train_val.prototxt ./build/tools/caffe/train -solver ./models/bvlc_referenc ...

  7. Doccms 中新闻列表排序无效bug的修复

    手动修改 content/index/list.php 37 为 $sql="Select * FROM ".TB_PREFIX."list Where channelI ...

  8. C#把datetime类型的日期转化成年月日或其他格式方法总结

    日期格式:yyyyMMdd HH:mm:ss(注意此字符串的字母大小写很严格) yyyy:代表年份MM:  代表月份dd:  代表天HH:  代表小时(24小时制)mm:  代表分钟ss:  代表秒D ...

  9. Extract Fasta Sequences Sub Sets by position

    cut -d " " -f 1 sequences.fa | tr -s "\n" "\t"| sed -s 's/>/\n/g' & ...

  10. Redis有序集合Zset（sorted set）

    zadd/zrange 127.0.0.1:6379> zadd zset01 60 v1 70 v2 80 v3 90 v4 100 v5(integer) 5127.0.0.1:6379&g ...