详解 CSS 属性 - :before && :after

如今咱们常常在 html 源码中看到以下的写法：

这里的 ::after 和 ::before 就是咱们今天来探讨的 css 伪元素之二 - :before && :after。

伪元素

首先咱们要明白什么是伪元素，css 设置伪元素是为了方便给某些选择器添加特殊的效果。伪元素的语法格式通常为：

selector:pseudo-element {property:value;}

这里的 property 是指伪元素的属性。此外，css 类也能够与伪元素配合使用，格式以下：

selector.class:pseudo-element {property:value;}

伪元素就是这样经过赋值给本身属性从而给指定的选择器添加上样式的效果。

: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 是否为必选项呢？咱们尝试把 content 移除。

.before:before{display:block; color:red;}
<div class="before"> me</div>

//没有了 content 属性，新内容天然是为空的
//同时咱们查看 html 源码会发现，:before 是没有生效的

那么咱们设为空呢？

.before:before{content:''; display:block; color:red;}
<div class="before"> me</div>

//新内容依然为空
//此时 :before 生效

因此咱们明白，对于伪元素 :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>

//无内容

//鼠标移至 div 上时，新内容出现。

这里须要注意二者使用的顺序，伪元素应该位于后面，若是顺序改成 .before:before:hover 是无效的。

配合取值函数 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 值为出如今指定元素内容的后面，一样举例说明：

.after:after{content:'after you'; color:#F00;}
<div class="after">I </div>

//伪元素 :after 生成的新内容区域出如今指定元素内容的然后面

:after 其余特征与 :before 一致，能够参考上文，在此就不赘述。

参考

http://www.bennadel.com/blog/2445-using-css-pseudo-elements-before-and-after.htm