::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. ModernUI教程：如何从MUI样式中派生自定义样式

    下面的步骤用来说明怎么样去创建一个基于MUI的自定义样式.让我们创建一个字体颜色显示为红色的按钮样式. 可视化显示如下: 因为我们并没有明确生命继承自MUI风格,它还是采用WPF的默认风格.我们需要设 ...

  2. [POJ2104]K-th Number

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 34048   Accepted: 10810 Ca ...

  3. Graphql介绍（Introduction to GraphQL）

    Introduction to GraphQL  GraphQL介绍 Learn about GraphQL, how it works, and how to use it in this seri ...

  4. 既不删除, 也不生成DS_store

    defaults write com.apple.desktopservices DSDontWriteNetworkStores true sudo find / -name ".DS_S ...

  5. Day Three(Beta)

    站立式会议 站立式会议内容总结 331 今天:列表关于div控制长度选择控制字段长度而非cssCtrl;editor学习使用 遇到的问题:无 明天:复习,没什么时间花在代码上,可以构思下闹钟的过程 4 ...

  6. 从库查看状态的时候显示“ Last_Error”

    mysql> show slave status\G;*************************** 1. row ***************************         ...

  7. 日期处理-将String 转为Date

    package com.test; import java.text.DateFormat; import java.text.ParseException; import java.text.Sim ...

  8. Java设计模式（三） 装饰模式

    装饰模式:动态的将责任附加到对象上,想要扩展功能,装饰者提供有别于继承的另一种选择. 1,创建顶级类 package com.pattern.decorate; public abstract cla ...

  9. 平行四边形面积 light 1305

    double 不一定是与x y轴平平行 所以要正弦定理和余弦定理 似乎一定要printf输出 错了好几次 #include<iostream> #include<math.h> ...

  10. lucene-一篇分词器介绍很好理解的文章

    本文来自这里在前面的概念介绍中我们已经知道了分析器的作用,就是把句子按照语义切分成一个个词语.英文切分已经有了很成熟的分析器: StandardAnalyzer,很多情况下StandardAnalyz ...