创造一系列图标
Nicolas Gallagher 再次通过不使用图片的情况下，拓展了上面的想法创造了另一个层次的a massive set of iconsIcon，最多只有两个伪类元素。
更有效的使用空间
CSS带来的，CSS也能带走。这句话的意思是伪类元素内容可以通过媒体查询applied or removed conditionally via media queries。或许你可以在空间充裕的情况下使用Icon，当空间充裕的时候使用更有描述性的文字。
使用更有装饰性的排版
如果你的伪类元素是文字，他们将会继承他们父类元素的排版样式。但是当你设置内容时，你也可以对它们使用样式。也就是说，你可以使用不同的字体和颜色让你的标题更有装饰效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
h2 {
text-align: center;
}
h2:before, h2:after {
font-family: "Some cool font with glyphs", serif;
content: "\00d7"; /* Some fancy character */
color: #c83f3f;
}
h2:before {
margin-right: 10px;
}
h2:after {
margin-left: 10px;
}
|
创造浏览器宽度的条
当你需要元素，它的内容很很少，但是你需要它的背景可以填充整个宽度，你通常采用的做法是追加一个没有语义的内部包含容器，或者使用一个可以重复空间定义。或者你可以通过使用一个元素，将他的伪类元素延伸到边缘。simulate the effect
给 body 标签加边框
想在页面的左右增加一个规则的边框，并使用固定位置的伪类元素将条定义在头部和顶部，我们可以使用“body border” effect而并不需要使用额外的标签。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
body:before, body:after {
content: "";
position: fixed;
background: #900;
left: 0;
right: 0;
height: 10px;
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
body {
border-left: 10px solid #900;
border-right: 10px solid #900;
}
|
|
