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

最新推荐文章于 2025-06-29 09:09:03 发布

mellicapen

最新推荐文章于 2025-06-29 09:09:03 发布

阅读量2k

点赞数

分类专栏： css

7 篇文章

订阅专栏

本文详细介绍了CSS伪元素:before和:after的基本概念、语法及应用，包括伪元素的定义、内容属性的使用、与取值函数attr()的结合、以及在实际开发中的常见用法。通过实例演示了如何利用这两个伪元素实现页面布局、内容修饰等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在我们经常在 html 源码中看到如下的写法：

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

伪元素

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

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

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

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

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

现在我们再来看下效果：

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

对于伪元素 :before 和 :after 而言，属性 content 是否为必选项呢？我们尝试把content 移除。

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

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

所以我们明白，对于伪元素 :before 和 :after 而言，属性 content 是必须设置的，那么在上面的例子，我们知道属性的值可以为字符串，那么还可以为其他形式吗？答案是可以的，它还可以是指向一张图片的URL:

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

//无内容

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

这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为 .before:before:hover 是无效的。

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

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

此时达到的效果相当于：

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

伪元素 :after 与伪元素 :before 类型相同，只不过它指定的属性 content 值为出现在指定元素内容的后面，同样举例说明：

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

//伪元素:after 生成的新内容区域出现在指定元素内容的而后面

:after 其他特征与 :before 一致，可以参考上文，在此就不赘述。