::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;
  }