::before和::after伪元素的使用

:before和:after伪元素在CSS中可以被用来添加元素、加小标、清浮动等。

基本用法：

p::before {} 
p::after {}

1、string

<style type="text/css">
p::before{
    content: "《";
    color: blue;
}
p::after{
    content: "》";
    color: blue;
}
</style>
<p>::before和::after伪元素的使用</p>

结果为：《::before和::after伪元素的使用》

2.attr()

调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 href 地址显示出来。示例：

    <style type="text/css">
        a::after {
            content: "("attr(href) ")";
        }
    </style>
    <a href="www.baidu.com">百度</a>

结果为：

3.清除浮动

  .clearfix:after {
    clear: both;
    display: block;
    content: "";
    visibility: hidden;
  }