讓瀏覽器自動生成內容屬性-網頁制作技術
作者：佚名 時間：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}
任何生成的內容，不管是在元素之前還是之后，都包括在一個元素的框中，并且影響著它的格式、流、大小和布局。
