今天小编跟大家讲解下有关CSS中的content属性使用教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中的content属性使用教程 的相关资料，希望小伙伴们看了有所帮助。
Content属性应该算是使用最常用的一个css属性之一吧，比如我们创建一个聊天气泡、超链接的立体翻转特效、添加图标。都要使用到content属性，当然这个属性要结合：before和：after伪类使用。下面详细介绍它的用法。
字符串可以添加任意的字符串，用括号包围。另外可以使用UTF-8特殊字符（哪些特殊字符可用查看这里），以\[email protected](搭配 selector:before和selector:after)HTML：
XML/HTML Code复制内容到剪贴板 <aclass="yahoo"href="http://www.yahoo.com.tw">Yahoo</a> <aclass="google"href="http://www.google.com">Google</a>CSS：
CSS Code复制内容到剪贴板 .google:after{ content:"~~"attr(href)"~~" }运行结果就很直观了。content属性的值除了使用文本值外，还可以使用标签的一些属性值，方法是attr()，参见如下代码：
CSS Code复制内容到剪贴板 a.content:after{ content:attr(href); } XML/HTML Code复制内容到剪贴板 <aclass="content"href="http://www.zhangxinxu.com/">此标签的href值是：</a>结果如下截图（截自Firefox3.6）：
URI使用url()可以载入外部资源，主要是一些图标和图片，如果资源不可以显示有的浏览器会忽略它，有的会显示替代文本。 代码：
CSS Code复制内容到剪贴板 p:before{ content:url(http://yeebing.u.qiniudn.com/wp-content/themes/expound/images/favicon.ico); }不过导入的图片是不能改变宽高的，必须预先设定好。笔者一般使用background载入图片，然后使用background-size调整尺寸。如下图，前者使用content载入图片，无法改变图片宽高，后者是是使用background载入图片的效果。 代码：
CSS Code复制内容到剪贴板 p:before{ content:url(http://yeebing.u.qiniudn.com/wp-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; background-image:url(http://yeebing.u.qiniudn.com/wp-content/uploads/2013/11/Avatar_by_DeMoN8EyE-287×300.png); background-size:80px80px; overflow:hidden; }HTML元素属性attr(x)函数将选择器对象的属性（包括自定义属性）作为字符串返回，如果为空则返回空字符串。X的大小写依赖于HTML的文档类型。本站文章的超链接就是使用到了这个函数代码：
CSS Code复制内容到剪贴板 p:before{ content:attr(title)“:”; }引号open-quote和close-quote这两个值被来自于quotes属性设置的字符替代 用法：HTML
XML/HTML Code复制内容到剪贴板 <plang=“en”>English</p> <plang=“zh”>中文</p>CSS
CSS Code复制内容到剪贴板 p:lang(zh){quotes:“«”“»”“‹”“›”} p:lang(en){quotes:’“‘’”‘“‘”“‘”} p:before{ content:open-quote; } p:after{ content:close-quote; }注：元素要指定语言要使用lang属性no-open-quote和no-close-quote是不是对刚才quotes后面附加的“‘” “‘” 以及“<” “>”的用法有点疑惑呢？其实在其父元素上使用no-open-quote和no-close-quote就可以使用到后面那两个引号了。no-open-quote和no-close-quote旨在减少引号的嵌套，如下 代码：HTML
XML/HTML Code复制内容到剪贴板 <span><plang=“en”>English</p></span> <span><plang=“zh”>中文</p></span>CSS
CSS Code复制内容到剪贴板 p:lang(zh){quotes:“«”“»”“‹”“›”} p:lang(en){quotes:’“‘’”‘“‘”“‘”} span:before{ content:no-open-quote; } span:after{ content:no-close-quote; } p:before{ content:open-quote; } p:after{ content:close-quote; }计数器 counter相当于一个变量，根据css规则的增加以跟踪使用次数。它有三种形式：counter-reset重置计数器默认值counter-increment增加计数器counter()和counters()获取计数用法：
XML/HTML Code复制内容到剪贴板 <ul> <li><imgsrc=http://www.ztc188.com/skin/7ke/image/nopic.gif <li><imgsrc=http://www.ztc188.com/skin/7ke/image/nopic.gif <li><imgsrc=http://www.ztc188.com/skin/7ke/image/nopic.gif </ul> CSS Code复制内容到剪贴板 ul{ countercounter-reset:photocount; } img{ width:100px;} li{list-style:none; display:inline-block;} li:before{ content:“图”counter(photocount); countercounter-increment:photocount; }counter-reset必须定义与计数元素的父元素。默认值是从0开始的，我们可以增加一个参数来定义默认值，如counter-reset:photocount 5;，定义从5开始 counter-increment一般跟随在counter()后面，用于增加计数值，默认的步长值是”1″，同样我们可以改变它，如counter-increment:photocount 2;定义步长为2 counter()和counters()counter(name,style)计数的默认值是十进制，我们可以改变它的样式比如：content:counter(photocount,upper-alpha); 注：style值同list-stylecounters(name,string,style)对于计数器嵌套则必须使用counters了，string为分割的字符，style为样式 代码
XML/HTML Code复制内容到剪贴板 HTML <ul> <li>项目 <ul> <li>项目</li> <li>项目</li> <li>项目</li> </ul> </li> <li>项目</li> <li>项目 <ul> <li>项目</li> <li>项目</li> <li>项目 <ul> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> </ul> </li> </ul> </li> </ul>CSS
CSS Code复制内容到剪贴板 ul{ countercounter-reset:count; } li{list-style:none; } li:before{ content:counters(count,“.”)“”; countercounter-increment:count; }来源：爱蒂网
