Yukun的blog

精彩的伪元素效果收集

原文： A Whole Bounch of Amazing Stuff Pseudo Elements Can Do
翻译：http:haipi8.com/347
伪元素 :before 和 :after 能做出相当令人惊叹的效果。这两个伪元素可以给HTML中的任何元素增加两个可以自由操控的元素。这给了前端设计打开了无限的可能，而且不用添加影响语义的标签，以下是收集的令人惊奇的效果。

多重背景的画布

multiplecanvases

因为可以让伪元素绝对定位，你可以想象成给每个元素两个附加的层，Nicolas Gallagher 展示了很多这样的程序，包括多重边框，模拟CSS3多重背景以及等高列。

用一个元素做出更多的形状

shapes

上面的形状和其它很多的形状都可以用一个元素做出来，让它们更加实用了。相对于那些用1700个div做出的“纯CSS的咖啡杯”的巧妙设计，更实用
这里是一个六角星的例子：

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

【译注：http://jsbin.com/ibobex】

打印样式中显示URL的链接地址

printpreview

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

【译注：http://jsbin.com/adesat】

清除浮动

floatclear

不用添加多余的标签清除container的浮动，伪元素就可以做到。著名的“clearfix”就是这样做的。只要给标签加上更语意化的“group”类名就可以了。

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

模拟 float:center

float middle

有没有人用先不讨论，float属性真的没有center的值。浮动有left和right值，我们可以用伪元素占位划分出两列中间的空位，然后在那里放一张图片，可以模拟出这个效果。

标出代码块所用的语言

codeblock

这个网站的代码块都用伪元素标出了语言

<pre rel="CSS"></pre>
pre:after {
   content: attr(rel);
   position: absolute;
   top: 22px;
   right: 12px;
 }

创造出一整套图标

icons

Nicolas Gallagher把创造形状的的想法提升到另一个层次，没有用图片，只用（大多数都是）两个元素加上伪元素做出一套复杂的图标。

更有效地使用可用空间

media queries and pseudos

CSS给你的，CSS也能拿走（原文：What CSS giveth, CSS can taketh away.）。我的意思是通过media queries伪元素可以显示或者移除伪元素。也许你想在空间有限时只展示图标，空间充裕时显示描述更清晰的文字。

让排版更华丽

typographic flourish header

如果伪元素的内容是文字，它们将继承父元素的字体设置。如果你给它们设置了内容，就可以给他们设置样式，比如，不同的字体，不同的颜色，让你的标题更华丽。

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

制作body border效果

body border

用普通的border left 和 border right， 然后给伪元素fixed定位在顶部和底部，可以做出“body border”效果，不实用任何专门的元素。

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

做一个闪闪发光的按钮

gleaming button

给伪元素设置 transparent white 或者 transparent gradient ，定位到按钮外面（用overflow:hidden;隐藏），鼠标经过时设置transition，就能让按钮在鼠标经过时有一道光闪过的效果。目前只能用Firefox 4或者5看，目前别的浏览器都不支持伪元素的transitions。
原作 Anton Trollbäck;Pseudoelementized 作者是 Nicolas Gallagher; 另外一个版本由我制作。

在链接上划过时，页面淡出效果

page fadeout

如果没有给元素设置相对定位，绝对定位的伪元素会相对于设置了相对定位的祖先元素定位。如果没有祖先元素设置相对定位，就会相对于跟元素定位。这样就能设置一个full-browser-window元素，把它保存到元素后面，鼠标经过时显示，就能做出“page fade out”效果了。

给有序列表的数字设置样式

ordered list

想过给有序列表的数字设置样式吗？最后你肯定是用不够优雅的方法，比如用span包裹内容，设置li的样式，然后移除span的样式。或者更疯狂的用背景图片，或者干脆自己写上数字。这些方法都不够酷，用伪元素做计数器这样就好多了。

Make data tables responsive

mobile table

大表格在小屏幕中看起来很糟糕，不是缩放，就是出现横向和纵向的滚动条，缩小后太小看不清。我们可以一起使用CSS media queries 和伪元素 Make data tables responsive 为小屏幕设置更有可读性的表格。

制作漂亮的tooltip

tooltip

用HTML5 data attribute， 然后把属性的值放到伪元素中并设置样式，就能用CSS做出个性化的tooltip.【译注：原文回复中的另外一个演示】

Yukun

, , ,