三、使用选择器在页面中插入内容
在CSS中使用before与after伪元素选择器在页面元素的前面或后面插入内容,而插入的内容是用content属性来定义的。确切的说这两个伪元素只在css 2.0中添加的,但是直到css3都在不断的改良和扩展。
插入文本内容
1、使用选择器来插入内容的方法,div:before{content:'内容'}
2、指定个别元素不进行插入,div:before{content:none}
插入图像文件
1、在标题前插入图像文件,需要使用url属性值来指定图像文件的路径,例如:div:before{content:url(logo.jpg)}
2、插入图像文件的好处,虽然可以利用img元素在页面中追加图像文件,但是也可以使用样式表来追加图像文件,这样做可以为页面编写节省大量的时间。当然这里还有在样式表里追加图像文件的方法,就是把他作为元素的背景图像文件来追加。但是在打印的时候,如果设定为不打印背景的话,使用before选择器追加的图像文件可以正常打印,但是使用背景图追加的方式追加的图像文件就不能正常打印了。
3、将属性的值作为图像的标题来显示,如果在content属性中使用“attr(属性名)”这中形式来指定attr属性值,那么可以把某个属性的属性值显示出来。例如:content:attr(alt)
插入项目符号
1、在多个标题前加上连续符号
使用方法:<元素>:before{ content:counter(计数器名)}
<元素>{ counter-increment:before选择器或after选择器中指定的计数器名}
2、在项目符号中追加文字,例如:div:before{content:'第' counter(计数器名) '章'}
3、指定编号的种类,例如:content:counter(计数器名,编号种类)
4、编号嵌套
5、在字符串两边添加嵌套文字符号,使用content属性的open-quote和close-quote属性值在字符串两边添加诸如括号、单引号、双引号等,注意当添加双引号是要使用“\”转义字符,如div{quotes:"\'" "\""}