CSS中的content属性如何使用好代码教程

美丽的小花园有许多榕树，一簇簇树叶伸到路面上，树叶真绿的可爱。榕树正在茂盛的时期，好象把它全部生命力都展示给我们看。那么多的树叶，一簇堆在另一簇上面，不留一点缝隙，我仿佛也成了一片树叶。那翠绿的颜色明亮地照耀着我的眼睛，似乎每片叶子上都颤动着一个新的生命。这美丽的北国树啊。

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

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

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

<aclass="yahoo"rel="nofollow noopener noreferrer" href="http://www.yahoo.com.tw">Yahoo</a>
<aclass="google"rel="nofollow noopener noreferrer" 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"rel="nofollow noopener noreferrer" 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
<plang=“zh”>中文

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复制内容到剪贴板

<plang=“en”>English
<plang=“zh”>中文

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=“../Pictures/3BC850D9B55874714E0667170AE02FFE8349FFE0F1DDE_800_1200.jpg”/></li>
<li><imgsrc=“../Pictures/7A7D77703B6EFAF4E5002D0E66FFF8380F1F49A565A91_673_1010.JPEG”/></li>
<li><imgsrc=“../Pictures/k-10.jpg”/></li>
</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-style
counters(name,string,style)对于计数器嵌套则必须使用counters了，string为分割的字符，style为样式

代码

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