让浏览器自动生成内容属性-网页制作技术
作者：佚名 时间：2014-03-21
生成的内容属性
生成的内容属性
生成内容的主意并不是HTMl带来的新观念。早期的浏览器就已经可以自动追加适当的项目符号，以增强无序列表和有序列表项的可读性。这样的特性非常的方便，作者早就期盼着HTML能够提供一些更好的内容生成工具。CSS2最终达成了这点愿望，它使作者能够创建任意内容、编号列表和所有类别的基于元素的内容。要建立CSS生成内容模型，就要使用content和quotes属性，以及“:before”和“:after”伪元素。使用前者来定义需要的内容，然后使用后者将内容相对于文档中的元素进行定位。
“before” 和 “:after”伪元素
以前说过伪元素的说法，读者已经看到了其中一个（：first-letter）如何在起作用。“:before” 和 “:after” 伪元素的操作非常类似。向样式元素选择器中追加这两个伪元素，就可以选择并指定文档中生成的内容的内容和属性。通常情况下，在这些伪元素内创建的内容都会继承父元素的显示属性，应用到元素上的字体、大小和颜色等也会应用到其生成的内容上。例如：
p.note{color:blue}
p.note:before{content:"Note:"}
该样式示例将单词“Note:”插入到所有<p class=note>元素的前面。插入的文字显示为蓝色，这与段落的其余部分一样。用这个样式替换之后，插入的文字会变为红色，而note的其余部分则是蓝色：
p.note:before{content:"note:"; color:red}
任何生成的内容，不管是在元素之前还是之后，都包括在一个元素的框中，并且影响着它的格式、流、大小和布局。
