伪类元素之美

通过使用:before和:after，你能创作出让人称奇的视觉效果。对页面中的每个元素，你都有两个额外的可以控制的元素，本来这些是需要额外的元素来实现。他们给设计带来了更多的趣味性的空间，而不是增加无语义的有负面影响的标签。这里给大家整理了一堆让人称奇的东西。让我们开始吧！

给了你多层背景画布

因为你可以相对于他们的父元素绝对定位伪类元素，你可以把他们想象他们是每个元素的两个额外层。Nicolas Gallagher shows us 给我们展示了很多这种应用，包括多层的边框，结合css3的多重背景和等高列。

扩展通过单一元素表现更多图形的可能

所有上面的图形any many more都可以通过一个单一的元素创造出来，这是一个很现实的方法。和“make a coffee cup with pure CSS!”的这类案例相反（使用了1700的div），这种方法更加实用。
下面是这段代码可以让我们得到六角星的例子：

#star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
}
#star-six:after {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
}

将链接文字的链接地址打印出来

@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}

清除浮动

和增加而外的没有语义的标签来清除容器浮动相比，我们可以使用伪类元素来为我们做这件事情。就是我们熟悉的“clearfix”，和另外一个更有语义的被命名为类名“group”。

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

模拟居中浮动

浮动属性中实际上并不包含居中的值，除非我们自己希望有这个属性。浮动虽然有左和右属性，但是通过占位的伪类元素我们可以在两列布局中间开辟出一个区域放一张图片，我们可以模拟出这种效果simulate the effect。

表示出区块中代码使用的是哪种语言

你现在正在使用的这个网站，通过伪类元素标示出了代码块她是用哪种语言。

<pre rel="CSS"></pre>

pre:after {
  content: attr(rel);
  position: absolute;
  top: 22px;
  right: 12px;
}

创造一系列图标

Nicolas Gallagher 再次通过不使用图片的情况下，拓展了上面的想法创造了另一个层次的a massive set of iconsIcon，最多只有两个伪类元素。

更有效的使用空间

CSS带来的，CSS也能带走。这句话的意思是伪类元素内容可以通过媒体查询applied or removed conditionally via media queries。或许你可以在空间充裕的情况下使用Icon，当空间充裕的时候使用更有描述性的文字。

使用更有装饰性的排版

如果你的伪类元素是文字，他们将会继承他们父类元素的排版样式。但是当你设置内容时，你也可以对它们使用样式。也就是说，你可以使用不同的字体和颜色让你的标题更有装饰效果。

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而并不需要使用额外的标签。

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;
}

制作有发光的按钮

如果你使用块伪类元素，并让它们有从透明到白色，并将他们定位到按钮之外（通过overflow隐藏），当鼠标悬浮的时候通过使用动画效果你就会发现按钮有了光感。这个效果你可以在 Firefox4 或者 Firefox5使用了，因为这是目前唯一允许给伪类元素增加动画效果的浏览器。

Anton Trollbäck制作的原始版 Nicolas Gallagher 的伪类元素优化版; 我的另一个版本

当特殊链接触发时，页面渐隐

如果你没有设置一个相对属性来定位一个元素，绝对定位的伪类元素将会被定位在它的设置相对定位的父级元素。如果没有其它的元素，那它就会相对于它的根元素。你可以通过它创造一个充满浏览器窗口的元素，把它放在主元素的下面，这样我们就能通过链接创造一种“页面渐隐的效果”。

让标题看上去像丝带般的三维效果

每个人都喜欢丝带！看看通过html和css创造的丝带Check out this snippet。这使用了一点 z-index负值的形式，这在有些时候需要一个额外的容器元素去防止下面的伪类元素在一个透明的背景之下。

修饰有序表单的数字列表

你是不是曾经试图给有序表单的数字定义样式？你可能会把这些数字包在一个span标签内，并给他们定义样式，但是当我们移除span的样式的时候就乱掉了。或者我们还可能使用更疯狂的方法，用数字图片当背景。或者移除表单样式去掉，使用你自己的数字。诸如种种。更好的方法是使用伪类元素来做这件事情pseudo elements as counters。

让数据表单有更好的适用性

用小屏幕看一个大的数据表单是一个噩梦。不仅是放大还是需要垂直或者水平滚动，并且当他们缩小的时候他们会变得太小而无法阅读。我们可以通过使用CSS 媒体查询使用伪类元素来重新格式化它们，使其在小屏幕上让他们有更强的可阅读性make the data table responsive。

创造样式化的提示

使用HTML5的data属性，然后将这些属性取出来，样式化后放到伪类元素里面，我们可以通过create completely custom tooltipscss创造完整的定制提示。

中文原文：伪类元素之美
英文原文：A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
转载请注明以上信息，以表示对作者和译者的尊重，多谢！