《HTML 5与CSS 3权威指南（第3版·下册）》——第20章 使用选择器在页面中插入内容

第20章

使用选择器在页面中插入内容

20.1 使用选择器来插入文字

20.1.1 使用选择器来插入内容

首先，让我们来回顾一下，在CSS 2中是如何使用样式在元素的前面或后面插入内容的。

在CSS 2中，使用before选择器在元素前面插入内容，使用after选择器在元素后面插入内容，在选择器的content属性中定义要插入的内容。例如，在如下所示的代码中，对h2元素使用before选择器，并且用content属性来定义在h2元素前面插入的内容为“COLUMN”文字。另外，当插入内容为文字的时候，必须要在插入文字的两旁加上单引号或者双引号。

为了让插入的文字具有美观效果，我们可以在选择器中加入文字的颜色、背景色、文字的字体等各种样式。代码清单20-1是一个before选择器的使用示例，在该示例中，在“标题”文字前加入“COLUMN”文字，在before选择器中，指定文字颜色为白色，背景色为橘色，并且用padding属性与margin属性对文字周围的余白进行适当的设定，同时，指定字体为“Comic Sans MS”。

这段代码的运行结果如图20-1所示。

另外，如果将before选择器改为after选择器，则将“COLUMN”文字插入到标题文字的后面。