::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. RabbitHub开源情况及计划

    之前写过一篇".NET 平台下的插件化开发内核(Rabbit Kernel)",已经过去三个月了,期间RabbitHub并不是没有了发展更不是放弃了发展,在RabbitHub中的群 ...

  2. SQLServer中的事务与锁

    事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂,不能保证数据的安全正确读写. 死锁:是数据库性能的 ...

  3. [HDOJ5442]Favorite Donut（最大表示法）

    嗯……就是最小表示法改一下…… 这题就是把S串当作两个判断同构的串,然后就搞出最大的表示了 然后在反向再做一次 O(n)求最大表示,O(n)判断正反谁大

  4. 样条函数 -- spline function

    一类分段(片)光滑.并且在各段交接处也有一定光滑性的函数.简称样条.样条一词来源于工程绘图人员为了将一些指定点连接成一条光顺曲线所使用的工具,即富有弹性的细木条或薄钢条.由这样的样条形成的曲线在连接点 ...

  5. 判断移动端js代码

    var ua=navigator.userAgent.toLowerCase(); var contains=function (a, b){ if(a.indexOf(b)!=-1){return ...

  6. 生产环境下案例 No space left on device （inode使用满的情况）

    第一种情况: 问题: 如果想磁盘写入数据提示如下错误: No space left on device. 通过df -h查看磁盘空间,发现没满,请问可能原因是什么? 解答: 可能是inode数量被消耗 ...

  7. TP学习笔记一（tp的目录结构 , tp的输出方式）

    一.ThinkPHP的介绍 //了解 MVC M - Model 模型 工作:负责数据的操作 V - View 视图(模板) 工作:负责前台页面显示 C - Controller 控制器(模块) 工作 ...

  8. java中的@Override标签，小细节大作用

    转载:http://www.cnblogs.com/octobershiner/archive/2012/03/09/2388370.html 一般用途                         ...

  9. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  10. Java--笔记（3）

    21．当涉及到继承时,按照如下顺序执行: (1).执行父类的静态代码块 (2).执行子类的静态代码块 (3).执行父类的构造代码块 (4).执行父类的构造函数 (5).执行子类的构造代码块 (6).执 ...