伪元素

你可以用伪元素做的有趣事情

CSS 中的伪元素能做什么,其实在《伪元素能帮助我们做些什么》一文中就和大家探讨过。我们知道伪元素可以帮助我们 清除浮动制作Icon图标分割线CSS TooltipsCSS计数器 等事情。其实除了这些常见的事情之外,CSS 伪元素还可以帮助我们做一些非常有趣的事情,这些有趣的事情也称得上是 CSS 方面的小技巧吧。接下来,和大家聊聊这方面的话题。

CSS伪类和伪元素总结

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

大放异彩的伪元素——可以做什么?

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

CSS3制作共享工具栏

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

目标

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

返回顶部