你所不知的 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> 

如今咱们再来看下效果：
//由伪元素 :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> 

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

a::before{content: attr(title)}
<a href="http://www.segmentfault.com" title="专业面向开发者的中文技术问答社区"></a> 

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

<a href="http://www.segmentfault.com">专业面向开发者的中文技术问答社区</a> 

:after

伪元素 :after 与 伪元素 :before 类型相同，只不过它指定的属性 content 值为出如今指定元素内容的后面，说明省。

二：伪类和伪元素的区别

伪类种类

伪元素种类

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

例如：

a:link {color:#111} a:hover {color:#222} div:first-child {color:#333} div:nth-child(3) {color:#444} 

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

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

例如：

p::first-line {color:#555} p::first-letter {color:#666} a::before {content : "hello world";} 

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

总结：

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

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

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

但由于兼容性的问题，因此如今大部分仍是统一的单冒号，可是抛开兼容性的问题，咱们在书写时应该尽量养成好习惯，区分二者。