转载请注明文章出处：
使用选择器在页面中插入文字
<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style type="text/css">p:before{content: '你好,';color: white;background-color: orange;font-family: '黑体';}p:after{content: ',见到你很高兴!';color: white;background-color: orange;font-family: 黑体;}p.zhang:after{content: none;}p.zhang:before{content: none;}</style></head><body><p>小红</p><p class="zhang">张林</p><p>王强</p></body></html>
在标题前插入图像文件
<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style type="text/css">h1:after{content: url(img.png);}</style></head><body><p>王强</p></body></html>在CSS3中，使用content属性的attr（属性名）来指定attr的值。这样可以将某个属性的属性值显示出来。<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style type="text/css">img:after{content: attr(alt);display: block;}</style></head><body><p align="center"><img src="xp.png" alt="系统图片" width="200" height="200" /></p></body></html>添加编号<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style type="text/css">h3:before{content: '第'counter(count)'章';color: red;font-family: 黑体;font-size: 24px;}h3{counter-increment: count;}</style></head><body><h3>HTML5简介</h3><h3>HTML5结构</h3><h3>多媒体播放</h3><h3>本地存储</h3><h3>表单与文件</h3><h3>新增元素</h3></body></html>
使用before选择器或after选择器的counter属性，不但可以在编号中追回文字和设置样式，还可以为编号设置编号类型。
指定编号类型可以使用list-style-type属性，常用的编号种类介绍如下：
<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style type="text/css">h1:before{content: counter(count, upper-roman)'.';color: red;font-family: 黑体;}h1{counter-increment: count;}h2:before{content: counter(count1)'.';color: red;font-family: 黑体;}h2{counter-increment: count1;margin-left: 50px;}</style></head><body><h1>创建网站及站点信息</h1><h2>网站建设理论</h2><h1>安装IIS服务器</h1><h2>站点管理</h2><h1>网站栏目及版块设计</h1><h2>网页文本概述</h2><h1>设计产品信息版块</h1><h2>多彩文字设计</h2></body></html>
在符号两边嵌入文字符号
<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style type="text/css">h1:before{content: open-quote;color: red;font-family: 黑体;}h1:after{content: close-quote;color: red;font-family: 黑体;}h1{quotes: "《" "》";}</style></head><body><h1>ASP基础教程与实验指导</h1><h1>计算机组装</h1><h1>HTML5从新手到高手</h1></body></html>
content属性主要用来插入内容，，而该属性与before和after伪元素配合使用，将生成的内容放在一个元素内容的前面或后面。另外，该内容创建的框类型可以用display属性控制。content: normal string attr() uri() counter()normal 默认值。string 插入文本内容。attr() 插入元素的属性值。uri() 插入一个外部资源（图像、声频、视频或浏览器支持的其他任何资源）counter() 计数器，用于插入排序标识。
<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style type="text/css">.text{width: 400px;height: 50px;line-height: 50px;overflow: hidden;text-align: center;color: #ff0000;border: #993300 solid 1px;}#text_c:before{content: "您使用的浏览器支持content属性";}</style></head><body><div id="text_c" class="text">—content属性</div></body></html>
别让别人徘徊的脚步踩碎你明天美好的梦想，
