在学到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权威指南第三版”。