在学到CSS列表这一章的时候，看到一句话：
列表中的项就是块级框，而列表的标志不属于文档布局，是浏览器的生成内容。
首先给大家回顾一下知识，列表标志是什么?
对于无序列表，标志就是某种圆点，如空心圆，实心圆或方块。
对于有序列表，标志则是一个计数器，对于每个后续项，计数不断加1.
那么什么是生成内容呢？
在列表项里列表标志就是生成内容，在列表项的文档内容里，没有任何部分直接表示这些标志，而且作为创作人员，你不必在文档内容里写上这些标志，浏览器会自动生成合适的标志。
为了向文档插入生成内容，可以使用：before和：after伪元素。这些伪元素会根据content属性把生成内容放在一个元素内容的前面或后面。
比如，你可能希望所有超链接前面增加前缀文本“(link)”加以标志这是个链接。
具体的代码就是：“a[href]:before (content:”(link)”;}”
我写了一个简单的例子展示这张效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css生成内容</title>
</head>
<style type="text/css">
a[href]:before {content:"(link)";};
</style>
<body>
<p>
<a href="#">Spring is a delightful season</a>. The temperatures are moderate, and the blooming trees and flowers make the city bright with colors.<a href="#">This is the time when we can </a> begin to wear lighter and more brightly colored clothes and go outdoors more often. Smaller children like to bring their kites out to the spacious square. <a href="#">Also I enjoy going back to the village on this holiday </a>after being in the city for the winter months.
</p>
</body>
</html>运行结果：
可以看到，在每个link的前面都加上了一个文本内容:（link）
不知细心的读者发现了没，那个文本内容加在了超链接里面，这明显不是我们的初衷，我们的初衷是这个文本只是用来作为超链接的提示信息，但却吧它也加在了超链接里面，这是怎么回事呢?
那么我们就要记住，
“在CSS2.1中，除了列表标志，无法把生成内容放在元素框之外”
就是说，生成内容一般是放在元素框里面的，所以才会导致超链接的提示信息放在了超链接里。
另外，对于生成内容，CSS还作了以下规定：
- 禁止浮动或定位:before和:after内容，还禁止使用列表样式属性以及表属性
- 如果：before或：after选择的主体是块级元素，则display属性只接受值none、inline、block和marker。其他值都处理为block。（就是说：before或：after选择的主体是块级元素，那么：before或：after的content也被处理为块级元素，即使用display属性声明为其它值，也被当作block值处理）
- 如果:before或:after选择器的主体是一个行内元素，属性display只能接受值none和inline。所有其他值都处理为inline.
此外，生成内容的这个内容具体可以是什么呢?
这个内容可以是 string（字符串）或者 url （使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源））或者 counter（计数器，如有序列表的标志就是一个计数器）或者 attr (标签属性值) 或者 前引号和后引号。
“生成内容的用途只受你想象力的限制，只要想得到，生成内容就能做得到”
摘录来自: Eric Meyer. “CSS权威指南第三版”。
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
