css3中::after和::before的区别是什么？

::after和::before都是CSS3中的伪元素，用于向某些选择器设置特殊效果。那么::after和::before之间有什么区别吗？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。

::after伪元素在元素之后添加内容，在被选元素的内容后面插入内容。这个伪元素允许创作人员在元素内容的最后面插入生成内容。

::before伪元素在元素之前添加内容，在被选元素的内容前面插入内容。这个伪元素允许创作人员在元素内容的最前面插入生成内容。

::after伪元素和::before伪元素需要使用 content 属性来指定要插入的内容。【相关教程推荐：css视频教程】

默认地，::after伪元素和::before伪元素是行内元素，不过可以使用属性 display 改变这一点。

::after和::before的区别

同：

::before和::after都是某标签的兄弟节点

异：

::before 是某标签前的兄弟元素，用于在被选元素的内容前面插入内容。

::after 是某标签后的兄弟元素，用于在被选元素的内容后面插入内容。

示例：

// style
p::before {
  content: '我是在p标签前的兄弟元素'
}
p::after {
  content: '我是在p标签前的兄弟元素'
}

// html
<p>--我是p标签--</p>

1.png-600

更多前端开发知识，请查阅 HTML中文网！！

以上就是css3中::after和::before的区别是什么？的详细内容，更多请关注0133技术站其它相关文章！