Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡、超链接的立体翻转特效、添加图标。都要使用到content属性,当然这个属性要结合:before和:after伪类使用。下面详细介绍它的用法。

字符串

可以添加任意的字符串,用括号包围。另外可以使用UTF-8特殊字符(哪些特殊字符可用查看这里),以\开头。如下

p:before{ 
    content:“网站名:”;
} 
p:after{ 
    content:“\21E0″ 
} 

URI

使用url()可以载入外部资源,主要是一些图标和图片,如果资源不可以显示有的浏览器会忽略它,有的会显示替代文本。

代码:

p:before{ 
  content:url(http://yeebing.u.qiniudn.com/wp-content/themes/expound/images/favicon.ico); 
} 

不过导入的图片是不能改变宽高的,必须预先设定好。笔者一般使用background载入图片,然后使用background-size调整尺寸。如下图,前者使用content载入图片,无法改变图片宽高,后者是是使用background载入图片的效果。