css伪元素属性content用法场景

1.内容的生成(边框、图标、边框、符号等）
div:after{
content:’text”;
}
div:after{
content:url(1.jpg);
}
2.动态获取内容

div:before{
content: attr(data-content);
}
3.清除浮动
.div:after{display:block; content:”clear”; height:0; clear:both; overflow:hidden; visibility:hidden;}

4.让大小不固定图片垂直居中
.div{width:500px; height:500px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}
.div img{vertical-align:middle;}
.div:after{display:inline-block; width:0; height:100%; content:”center”; vertical-align:middle; overflow:hidden;}