Pseudo Elements

伪元素像伪类一样“粘”到选择器上，其形式为 选择器:伪元素 { 属性: 值; }。有四种这样的“粘合剂”。

首字母和首行

first-letter 伪元素应用于盒子内的第一个字母，而 first-line 应用于盒子内显示的最顶行。

例如，你可以使用类似以下的代码为段落创建首字母下沉效果和加粗的首行：


p {
    font-size: 12px;
}

p:first-letter {
    font-size: 24px;
    float: left;
}

p:first-line {
    font-weight: bold;
}

前后内容

before 和 after 伪元素与 content 属性结合使用，可以在不触及 HTML 的情况下，在盒子的两侧放置内容。

content 属性的值可以是 open-quote、close-quote、任何用引号括起来的 字符串，或者使用 url(图片名) 的任何图片。


blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

li:before {
    content: "POW! ";
}

p:before {
    content: url(images/jam.jpg);
}

content 属性有效地创建了另一个可供操作的盒子，因此你也可以为“展示性内容”添加样式。


li:before {
    content: "POW! ";
    background: red;
    color: #fc0;
}