擅用伪元素::before（:before）和::after（:after）

 

CSS伪元素::after用来创建一个伪元素，做为已选中元素的最后一个子元素。

通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

语法

 

element:after  { style properties }  /* CSS2 语法 */

element::after { style properties }  /* CSS3 语法 */

 

::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。

注: IE8仅支持:after。

我们几乎可以用想要的任何方法给 content 属性里的文字和图片的加上样式.

element::after {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

 

 

CSS伪元素::before用来创建一个伪元素，做为已选中元素的第一个子元素。（其他同after）