::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. javascript代码片段

    DOMReady函数,只要DOM结构加载完成即可,不必等待所有资源加载完成,节约时间,"DOMContentLoaded"在H5中被标准化 var DOMReady=functio ...

  2. IE6下margin时，float浮动产生双倍边距

    今天遇到了一个IE6下的兼容性问题,虽然IE6已经不被大众所期待了,用户也已基本上消失的所剩无几,但是,作为一个问题而存在,我们有必要尝试的去研究一下bug的改善方法 对元素float-left,然后 ...

  3. .net 使用memcache做缓存

    前段时间去一家公司面试,面试官问到我对缓存了解多少,因为我是做B/S开发的,所以把知道的都说了.比如:Application.Cache.页面缓存.文件缓存.然后面试官说“不止这些,还有呢?”,我后来 ...

  4. canvas模拟重力效果

    总结 速度和加速度是动画的基础元素,其中两者都是向量,包括了一个重要因素:方向. 要学会应用 分解 和 合成 ,将速度或加速度分解到x.y轴上,然后将每条轴上的加速度或速度相加,然后再分别与物体的位置 ...

  5. overlay-1

    .overlay-shadowbox{ visibility:hidden; position:absolute; display:block; margin:0; padding:0; top:0; ...

  6. Gson解析json数据

    1.解析单个对象 JSON字符串如下 [ { "formatDate":"2015-10-28", "date":"2015\u5 ...

  7. JAVA程序员一定知道的优秀第三方库（2016版）

    几乎每个程序员都知道要“避免重复发明轮子”的道理——尽可能使用那些优秀的第三方框架或库,但当真正进入开发时,我却经常发现他们有时并不知道那些轮子在哪里.最近,我在业余时间带几个年轻的程序员一起做了一个 ...

  8. poj3254 状态压缩dp

    题意:给出一个n行m列的草地,1表示肥沃,0表示贫瘠,现在要把一些牛放在肥沃的草地上,但是要求所有牛不能相邻,问你有多少种放法.     分析:假如我们知道第 i-1 行的所有的可以放的情况,那么对于 ...

  9. spring-ant-处理zip

    因为java类型自带的不支持中文路径,不过两者使用的方式是一样的,只是apache压缩工具多了设置编码方式的接口,其他基本上是一样的.另外,如果使用org.apache.tools.zip.ZipOu ...

  10. CentOS6.5下搭建NFS文件服务器

    本文参考这里 CentOS下搭建NFS服务器总结 环境介绍: 1. 服务器: 192.168.0.100 2. 客户机: 192.168.0.101 安装软件包: 服务器和客户机都要安装nfs 和 r ...