使用选择器来插入文字
css2中，使用before选择器在元素前面插入内容，使用after选择器在元素后面插入内容，在选择器的content属性中定义要插入的内容。将content属性值设定为none，然后在不需要插入内容的元素中将class属性值设定为这个给定的类名就可以了。另外，在CSS2.1中，除了none属性值外，还未content属性添加了一个normal属性值，其作用与使用方法none属性值的作用相同，并且使用方法也相同。从css2.1开始，值右当使用before选择与after选择器的时候，normal属性值的作用才与none属性值的作用相同，都是不让选择器在个别元素的前面或后面插入内容，但是none属性值只能应用在这两个选择器中，而normal属性值还可以应用在其他用来插入内容的选择器中，而在css2中，只有before选择器与after选择器能够用来在元素的前面或后面插入内容，所以在两者的作用完全相同，在css3中，已经追加了其他一些可以插入内容的选择的提案，针对这一类选择器，就只能用normal属性值了，而且normal属性值的作用也会根据选择器的不同而发生变化。
插入图像文件
h2:before{
content:url(mark.png)
}<h2>你好</h2>
目前firefox、safari、opera浏览器都支持这种插入图像文件的功能，在ie8中只支持插入文字的功能，不支持插入图像文件的功能。
另外在css3的定义中还可以通过url属性来插入音频文件、视频文件等其他格式的文件，但目前还没有得到任何浏览器的支持。
将alt属性的值作为图像的标题来显示
如果在content属性中通过”attr(属性名)”这种形式来指定attr属性值，可以将某个属性的属性值显示出来，例子：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>attr属性的使用示例</title>
<style>
img:after{
content:attr(alt);
display: block;
text-align: center;
margin-top: 5px;
}
</style></head><body><div>
<p><img src="sky.jpg" alt="蓝天白云"/></p></div></body></html>
在多个标题前加上连续编号
在content属性中使用counter属性值来针对多个项目追加连续编号，使用方法如下所示：
<元素>:before{
content:counter(计数器名);
}使用计数器来计算编号，计数器可以任意命名。
另外，还需要在元素的样式中追加对元素的counter-increment属性的指定，为了使用连续编号，需要将counter-increment属性的属性值设定为before选择器或after选择的counter属性值中所指定的计数器名。代码如下：
<元素>{
Counter-increment:before选择器或after选择器中指定的计数器名}
例子：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>对多个项目追加连续编号的示例</title>
<style>
h1:before {
content:counter(mycounter);
}
h1{
counter-increment: mycounter;
}
</style></head><body><div>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p></div></body></html>
在项目编号中追加文字
可以在插入的项目编号中加入文字，使项目编号变成类似”第1章”之类的带文字的编号。例如：
h1:before{content:’第’counter(mycounter)’章’}指定编号的种类
用before选择器或after选择器的content属性，不仅可以追加数字编号，还可以追加字母编号或罗马数字编号。使用如下所示的方法指定编号种类。
content:counter(计数器名,编号种类)
可以使用list-style-type属性的值来指定编号的种类，list-style-type为指定列表编号时所用的属性。
编号嵌套
使用嵌套编号如下：
h1{
counter-increment:mycounter
counter-reset:subcounter}
例如：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>编号嵌套示例</title>
<style>
h1:before {
content:counter(mycounter)'.';
}
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
h2:before{
content: counter(subcounter)'.';
}
h2{
counter-increment: subcounter;
margin-left: 40px;
}
</style></head><body><h1>大标题</h1><h2>中标题</h2><h2>中标题</h2><h2>中标题</h2><h1>大标题</h1><h2>中标题</h2><h2>中标题</h2><h2>中标题</h2></body></html>
中编号中嵌入大编号
可以将大编号嵌入在中编号中。例如：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>编号多层嵌入的示例</title>
<style>
h1:before {
content:counter(mycounter)'.';
}
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
h2:before{
content: counter(mycounter)'-'counter(subcounter)'.';
}
h2{
counter-increment: subcounter;
counter-reset: subsubcounter;
margin-left: 40px;
}
h3:before{
content: counter(mycounter)'-'counter(subconter)'-'counter(subsubcounter)'.';
}
h3{
counter-increment: subsubcounter;
margin-left: 40px;
}
</style></head><body><h1>大标题</h1><h2>中标题</h2><h3>小标题</h3><h3>小标题</h3><h2>中标题</h2><h3>小标题</h3><h3>小标题</h3><h1>大标题</h1><h2>中标题</h2><h3>小标题</h3><h3>小标题</h3><h2>中标题</h2><h3>小标题</h3><h3>小标题</h3></body></html>
在字符串两边添加嵌套文字符号
可以使用conten属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号，单引号，双引号之类的嵌套文字符号，open-quote属性值用于添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文字符号。
例如：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>添加嵌套文字符号的示例</title>
<style>
h1:before {
content: open-quote;
}
h1:after{
content: close-quote;
}
h1{
quotes:"("")";
}
</style></head><body><h1>标题</h1></body></html>http://www.cnblogs.com/hetaojs/p/7048389.html
延伸阅读
- 学习、实践。再学习，再实践 2023-04-15 16:46:17.453
- 从0到0.5，坚持学习 2022-09-08 15:52:26.217
- 来万码学习，是我最正确的选择 2022-09-07 11:34:40.69
- 学习与实践 2022-06-24 14:03:16.913
- 学习——工作——再学习 2021-06-01 15:31:45.667
- 不断学习，才能不断进步 2021-05-19 11:14:42.067
- 谢谢当初的选择 2020-06-11 16:44:20.733
- 选择要趁早 2020-06-11 15:49:52.17
- 此生难忘的一次学习 2020-06-11 15:30:55.913
- 我的学习之路 2019-11-24 10:38:29.473
学习、实践。再学习，再实践