css中::before和::after的区别

css中::before和::after的区别

/* ::after表示法是在CSS 3中引入的，::符号是指伪元素，:符号是指伪类（:hover）.
支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。*/
element:after  { style properties }  /* CSS2 语法 */
element::after { style properties }  /* CSS3 语法 */

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

异：
::before 是某标签前的兄弟元素
::after 是某标签后的兄弟元素

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

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

效果如图：