CSS中的content属性使用教程

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

字符串
可以添加任意的字符串，用括号包围。另外可以使用UTF-8特殊字符（哪些特殊字符可用查看这里），以开头。如下
這是一個在元素前面或後面插入內容的方法(搭配 selector:before和selector:after)
HTML：

XML/HTML Code复制内容到剪贴板

<a class="yahoo" href="">Yahoo</a>  

<a class="google" href="">Google</a>  

CSS：

CSS Code复制内容到剪贴板

.google:after {   

    /* 前後加入~~字串 與網址串接*/  

    content:"~~" attr(href)  "~~"  

}  

运行结果就很直观了。content属性的值除了使用文本值外，还可以使用标签的一些属性值，方法是attr()，参见如下代码：

CSS Code复制内容到剪贴板

a.content:after {   

   content: attr(href);   

}  

XML/HTML Code复制内容到剪贴板

<a class="content" href="">此标签的href值是：</a>  

结果如下截图（截自Firefox3.6）：

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

CSS Code复制内容到剪贴板

p:before{      

    content:url(content/themes/expound/images/favicon.ico);      

    }    

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

CSS Code复制内容到剪贴板

p:before{      

    content:url(content/uploads/2013/11/Avatar_by_DeMoN8EyE-287×300.png);      

    display:block;      

    width:80px;      

    height:80px;      

    overflow:hidden;      

    }      

p:after{      

    content:“”;      

    display:block;      

    width:80px;      

    height:80px;      

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!