::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. 外网不能访问部署在虚机的NodeJs网站（80端口）

    外网能访问部署在虚机的NodeJs网站需注意如下: 在管理门户上配置端点(Http 80->80) 在虚机中的防火墙入站规则中增加应用程序Node.exe的允许规则 启动NodeJs的侦听进程时 ...

  2. matlab eps

    matlab eps eps是一个函数.当没有参数时默认参数是1.返回的是该参数的精度. 也就是说单个的eps实际上是eps(1),表示的是1的精度. 这里要说一下精度的概念.浮点数所能表示的数值范围 ...

  3. TF2ZP函数

    TF2ZP 中TF是什么意思?   Transfer function   tf 就是传递函数的意思,简称传函 tf2zp是将传递函数转换为零极点形式的一个转换函数   [Z,P,K] = TF2ZP ...

  4. Competition-based User Expertise Score Estimation-20160520

    1.Information publication:sigir 2011 author:Jing Liu Harbin Institute of TechnologyMicrosoft Researc ...

  5. Volley用法

    RequestQueue requestQueue = Volley.newRequestQueue(this); JsonObjectRequest jsonObjectRequest = new ...

  6. [转]div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

  7. 【NOIP 2015 & SDOI 2016 Round1 & CTSC 2016 & SDOI2016 Round2】游记

    我第一次写游记,,,, 正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪里?正文在哪 ...

  8. 【BZOJ 2152】聪聪可可 点分治

    对于一棵树,fdrt找到重心,然后分治每个子树. 在一棵以重心为根的树上,符合条件的链是: 1.过重心(根) 2.不过重心 对于1我们只需dfs出距离重心(根)的距离然后统计再减去有重叠的边 对于2我 ...

  9. 堆 poj 2442

    t组数据 n m 给 n*m的矩阵 从每行拿出一个数 可有n^m个组合 求前n小的输出 维护前n小的数组 #include<stdio.h> #include<string.h> ...

  10. SpringMVC学习系列（8） 之 国际化

    一.基于浏览器请求的国际化实现: 1)在 spring的配置文件中添加 <bean id="messageSource" class="org.springfram ...