精彩的伪元素效果收集


原文: 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.【译注:原文回复中的另外一个演示