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>

更多前端开发知识,请查阅 HTML中文网 !!

以上就是css3中::after和::before的区别是什么?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读