::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. OS存储器管理(一)

    存储器的层次: 分为寄存器.主存(内存)和 辅存(外存)三个层次. 主存:高速缓冲存储器.主存储器.磁盘缓冲存储器, 主存又称为可执行存储器: 辅存:固定磁盘存储器.可移动的外部存储器: 其可长期保存 ...

  2. 从语言到库到框架，再到API，再到标记最后到DSL语言

    计算机技术发展很快,而且越来越快,结果也是越来越复杂,那么我们到底怎么搞定复杂性并重用代码? 很明显,这是个大难题.一开始我们要解决计算问题,发展了基本的编程语言. 很快,编程语言不能满足需求,我们需 ...

  3. Matlab和simulink数据的保存和读取

    文件的存储 MATLAB支持工作区的保存.用户可以将工作区或工作区中的变量以文件的形式保存,以备在需要时再次导入.保存工作区可以通过菜单进行,也可以通过命令窗口进行. 1. 保存整个工作区 选择Fil ...

  4. shell 实现Linux 控制台下树形显示目录

    #!/bin/bash function main(){      local pre=$1    local name=$2    echo "$pre$name"    tes ...

  5. Sublime轻量级编辑器

    对于从事计算机的小伙伴,好用的编辑器等效于手里的利器!可说为,砍柴不误,磨刀工! 手有神器,游走四方! sublime,记得好像是支持跨平台的 家乡的情绪 http://pan.baidu.com/s ...

  6. 关于最近折腾的ubuntu12.10

    win7旗舰正版up1 UltraISO + ubuntu-12.10-desktop-i386.iso + 4GKingston = 启动U盘 USB HDD 启动 进入ubuntu桌面,安装,磁盘 ...

  7. iOS-- 重要的链接

    面试题: http://www.jianshu.com/p/6a57c6e902e8 富文本: http://www.cnblogs.com/jys509/p/5018027.html

  8. myeclipse加入JavaEE

    1. 2. 3. 4.

  9. 通过HttpUrlConnection下载文件并显示进度条

    实现效果: 核心下载块: int count = 0; URL url = new URL("http://hezuo.downxunlei.com/xunlei_hezuo/thunder ...

  10. react.js 之 批量添加与删除功能

    最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上 ...