CSS content 属性

例

以下示例将在每个链接后的括号内加上网址：

a:after

{

content: " (" attr(href) ")";

}

属性定义及使用说明

ontent 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

默认值：	normal
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.content="url(beep.wav)"

浏览器支持

所有主流浏览器都支持Content属性。

注意： IE8只有指定!DOCTYPE才支持Content属性。

Content属性值

值	说明
none	设置Content，如果指定成Nothing
normal	设置content，如果指定的话，正常，默认是"none"（该是nothing）
counter	设定计数器内容
attr(attribute)	设置Content作为选择器的属性之一。
string	设置Content到你指定的文本
open-quote	设置Content是开口引号
close-quote	设置Content是闭合引号
no-open-quote	如果指定，移除内容的开始引号
no-close-quote	如果指定，移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）
inherit	指定的content属性的值，应该从父元素继承

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

ss3中出现了 ":before",":after"伪类，

你可以这样写：

h1:after{

content:'h1后插入的文本';

...}

这两个选择器的作用以及效果，这里就不在介绍了；主要说一下上面提到的一个css属性【content】用来和:after及:before伪元素一起使用，在对象前或后显示内容。

content的取值：

normal：默认值。表现与none值相同

none：不生成任何值。<attr>：插入标签属性值<url>：使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）<string>：插入字符串

counter(name)：使用已命名的计数器

counter(name,list-style-type)：使用已命名的计数器并遵从指定的list-style-type属性

counters(name,string)：使用所有已命名的计数器

counters(name,string,list-style-type)：使用所有已命名的计数器并遵从指定的list-style-type属性

no-close-quote：并不插入quotes属性的后标记。但增加其嵌套级别

no-open-quote：并不插入quotes属性的前标记。但减少其嵌套级别

close-quote：插入quotes属性的后标记

open-quote：插入quotes属性的前标记

这里比较不好理解的取值就是：counter(name)这些；

下面主要总结一下这块，最后会给出各个取值的demo，

比如我有如下html结构：

<ul>

<li>这个是有序列表</li>

<li>这个是有序列表</li></ul>

我要在每个li的后面加上当前li【index】值：

ul li{

counter-increment:index;

}

ul li:after{

content:'统计：'counter(index);

display:block;

line-height:35px;

}

解释：

count(name)这里的name，必须要提前指定好，否则所有的值都将是0；

count(name,list-style-type)这里的list-style-type就是css中list-style-type属性的取值；

下面给出完整DEMO

<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS content</title><meta name="author" content="phpstudy.net"><meta name="copyright" content="www.phpstudy.net"><style>

.string p:after {

margin-left: -16px;

background: #fff;

content: "支持";

color: #f00;}

.attr p:after {

content: attr(title);}

.url p:before {

content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png);

display: block;}

.test ol {

margin: 16px 0;

padding: 0;

list-style: none;}

.counter1 li {

counter-increment: testname;}

.counter1 li:before {

content: counter(testname)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter2 li {

counter-increment: testname2;}

.counter2 li:before {

content: counter(testname2,lower-roman)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter3 ol ol {

margin: 0 0 0 28px;}

.counter3 li {

padding: 2px 0;

counter-increment: testname3;}

.counter3 li:before {

content: counter(testname3,float)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter3 li li {

counter-increment: testname4;}

.counter3 li li:before {

content: counter(testname3,decimal)"."counter(testname4,decimal)":";}

.counter3 li li li {

counter-increment: testname5;}

.counter3 li li li:before {

content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";}</style></head><body><ul>

<li>

string：

你的浏览器是否支持content属性：否

</li>

<li>

attr：

</li>

<li>

url()：

如果你看到我的头像图片则说明你目前使用的浏览器支持content属性

</li>

<li>

counter(name)：

<ol>

</ol>

</li>

<li>

counter(name,list-style-type)：

<ol>

</ol>

</li>

<li>

counter(name)拓展应用：

<ol>

<li>列表项

<ol>

<li>列表项

<ol>

</ol>

</li>

</ol>

</li>

<li>列表项

<ol>

</ol>

</li>

<li>列表项

<ol>

</ol>

</li>

</ol>

</li></ul></body></html>

content和attr属性用的不是很多，但是它们能在页面下面悄悄的使用CSS来生成内容，下面让我们看看content和attr的用法相互配合产生神奇效果的

基本content用法

content属性能让程序员使用CSS往页面元素里填写内容：

.myDiv:after { content: "我是一个使用*content*属性生产的静态文字"; }

注意，如果想让伪元素：after绝对定位，必须对div设置position:relative

content和attr配合使用

content使用attr来从页面元素中动态的获取内容：

attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。

content里的字符串连接操作

还需要用JS里的字符串吗？答案是不需要了，CSS3里就能完成这些，是不是很神奇！attr的动态生成页面内容的能力着实是一件让人兴奋的事情。实际上可以用它配合content对页面的很多其他元素和属性进行操作。

切版 qieban(.cn)

在线咨询

上一篇：前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)
下一篇：在 Linux 上配置 mongodb

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS content 属性

您的项目需求