[DIV/CSS] CSS 属性 :before && :after的用法，伪类和伪元素的区别

一：:before && :after的用法 :before

如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明：

.before:before{content:'you before'; color:red;}

<div class="before"> me</div>

复制代码

在这里我们给伪元素 :before 添加了属性 content，并赋值为 you before。我们来看效果：


//在指定元素的内容 me 前添加了新内容 you before

我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值为 inline，那么我们可不可以修改新内容区域的属性，答案是肯定的。你可以像修改其他元素一样修改它的样式，我们来将它的 display 属性值来改为block。

.before:before{content:'you before'; display:block; color:red;}

<div class="before"> me</div>
http://www.nvzi91.cn/rlyby/032629988.html
复制代码

现在我们再来看下效果：


//由伪元素 :before 生成新内容区域果然变为了块元素
content 属性

对于伪元素 :before 和 :after 而言，属性 content 是必须设置的，我们知道属性的值可以为字符串，也可以有其它形式，比如指向一张图片的 URL:

content: url( "img/icon.png" )

复制代码

配合伪类使用

伪元素 :before 还可以配合伪类使用，这里举经常与 :before 配合使用的伪类 :hover 为例：

.before:hover:before{content:'you before'; color:red;}

<div class="before"> me</div>
http://www.nvzi91.cn/penqiangyan/29989.html
复制代码

配合取值函数 attr() 使用

还有一种较为常见的用法，即配合取值函数 attr() 一起使用，如：

a::before{content: attr(title)}

<a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a>
http://www.nvzi91.cn/waiyinyan/29990.html
复制代码

这个达到的效果跟下面一样：

<a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a>
http://www.nvzi91.cn/gongjingxirou/29991.html
复制代码
:after

伪元素 :after 与 伪元素 :before 类型相同，只不过它指定的属性 content 值为出现在指定元素内容的后面，说明省。
二：伪类和伪元素的区别 伪类种类



伪元素种类



伪类：作用对象是整个元素

例如：

a:link

{color:#111}

a:hover

{color:#222}

div:first-child

{color:#333}

div:nth-child(3)

{color:#444}
http://www.nvzi91.cn/nxby/29992.html
复制代码

尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。

伪元素：作用于元素的一部分

例如：

p::first-line

{color:#555}

p::first-letter

{color:#666}

a::before

{content : "hello

world";}
http://www.kmrlyy.com/niaodaoyan/33507.html  www.kmrlyy.com

复制代码

伪元素作用于元素的一部分：一个段落的第一行 或者 第一个字母。

总结：

伪元素其实相当于伪造了一个元素，例如before,first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；

而伪类没有伪造元素，例如first-child只是给子元素添加样式而已。

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。