:before\:after伪元素用法

  :before和:after这两个伪元素在真正的页面元素之前和之后插入一个额外的的元素，等效于下面的代码：

<p>

<span>:before</span>

HTML中真正的内容

<span>:after</span>

</p>

 

在HTML的源代码里面是找不到伪元素的内容的。

 

用法

:before和:after伪元素在p元素之前和之后插入新内容，使用content属性,并且可以设置css属性。

p:before{

  content:open-quote;

  color：#fff;

}

p:after{

  content:close-quote;

  color:#000;

}

 

在默认的情况下，这两个伪元素生成的元素是内联元素，如果要设置宽度和高度，需要先display：block;

 

伪类和伪元素可以同时使用，如：

p:hover:before,p:hover:after{

  background-color:#aaa;

}

 

：after还可以用来清除浮动

.clear:after{display:block;content:"";width:0;clear:both;}