CSS：(::before 与::after)

大炅Koss

于 2020-02-05 19:02:00 发布

阅读量330

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

11 篇文章

订阅专栏

本文详细介绍了CSS中::before和::after伪元素的使用方法。这两个伪元素允许在元素内容前后插入内容，不改变文档结构，仅在渲染层面生效。通过content属性指定插入的具体内容，可用于图标展示、文本添加等场景。

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

在css中，::before 和::after是一个 伪类元素，代表生成的内容元素。

利用::before可以把需插入的内容插入到元素的其他内容之前；利用::after可以把需插入的内容插入到元素的其他内容之后，并且默认内联显示。

1. ::before 和 ::after需要使用content属性来指定内容的值。

例如：

<a href="#" class="e2"></a>
<em style="font-style: normal">微博登录</em>

.e2::before
{
    content: "\f18a";                  /*图标编码*/
    color: #00b6f8;
    font-size: 150%;
    font-family: FontAwesome;
}

效果：
在这里插入图片描述
2. ::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

3.具体::before和::after的用法，可以看下面的链接：