:before和:after伪类元素创造神奇效果

作者佚名技术来源 CSS技术浏览发布时间 2012-02-23

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

1 2 3 4 5 @media print { a[href]:after { content: " (" attr(href) ") "; } }

清除浮动

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

1 2 3 4 5 6 7 8 9 10 11 .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

模拟居中浮动

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

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

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

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

1 2 3 4 5 6 pre:after { content: attr(rel); position: absolute; top: 22px; right: 12px; }

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS3网页制作实例:实现网页文字渐变内发光投影下一篇: HTML5教程:如何使用details元素和summary元素

关于:before和:after伪类元素创造神奇效果的所有评论

随机推荐