大家好！在早期的网页设计之中，我不得不从试验以及错误之中进行学习总结。那时没有可参考的杂志，也没有像 Codepen 或者其它类似的使用工具。如果有人可以为我指点一下，尤其是CSS方面，都将会是很大的帮助。现在我的经验越来越多，我想和大家分享一个有关于CSS 伪类以及伪元素的总结。如果你是一位前端设计者或开发者，你一定对将要讨论的伪元素以及伪类有所了解并且可能使用过它们。然而我还是建议你看看本文所讲的所有条目选项，你可能会有新的收获。

伪元素:before 和 :after可以做的东西是相当惊人的。对于页面上的每一个元素，你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能，而且不会对你的语义标签产生负面影响。这里有一大堆关于这些有趣的效果的示例，你想看的话就接着往下看吧。

伪类“:before”和“:after”在当今这个Web技术潮流之下，使用是越来越多。如果你有观注过各种网页设计的博客（或者有观注过本站的相关博文），你可能已经注意到了“:before”和“:after”在前端开发中展现的魅力。可能很多同学只知道是怎么用，但并未深入的去了解这两个伪类，并不要紧，今天由胡均根据Louis Lazaris英文文章原名《Learning To Use The :before And :after Pseudo-Elements In CSS》进行翻译，给大家介绍了“:before”和“:after”在Web设计中是如何起的作用，以及其需要注意的一些细节。希望能帮助更好的理解这两个伪类。

今天写个DEMO效果时，无意之中在Baidu图片中发现其图片列表使用了CSS3的transform,transition,box-shadow等属性。这是不是可以说百度在开始引领国内的CSSer开始使用CSS3相关属性呢？如果是的话，那这对于前端开发人员来说是一件福事。毕竟百度是国内互联网中大企业之一，他的一些举动都将有很多前端人员跟随着。这些都是我个人的猜想，仅供参考，因为我就是一个CSS3的爱好者，今天我想拿这个效果来说说自己的想法。如有不对还请谅解。

前几天藤藤在每一练中写了一个《CSS3制作Twitter信息框》效果，酷似Chrome浏览器的tabs效果：

有关于美化图片的教程，W3cplus有好几篇了，比如说《CSS3制作图片样式》、《jQuery和CSS3给图片制作圆角》这两篇是针对于美化图片圆角效果的教程，昨天在《CSS美化图片》一文中介了使用标签给图片设置朦板效果。

今天使用CSS3的伪类“:before”和":after"和animation等相关属性创建一个简单的共享工具提示栏效果。关键的一点是，我使用最少的HTML标签，以及不使用任何jQuery和javaScript脚本。但兼容性就惨了，这个大家都懂的。所以下面的效果只适合Firefox、Safari、Chrome和Opera浏览器。不过这种效果大家在平时制作中肯定常常使用到。那下面我们一起来看如何制作吧。

目标

使用纯CSS代码实现下面的DEMO效果：