大家都知道块级元素在不脱离正常布局流的情况下是会自动换行而行级元素则不会自动换行。但在项目中有需求是需要让行级元素也自动换行的通常这种情况我都是用 br/ 换行标签解决。而 《CSS SECRET》 中对 br / 标签的描述是这种方法不仅在可维护性方面是一种糟糕的实践而且污染了结构层的代码。 想想自己敲代码以来用的 br/ 标签还真不少。运用 after 伪元素可以有一种非常优雅的解决方案1234.inline-element::after{content:\A;white-space:pre;}通过给元素的 after 伪元素添加 content 为 \A 的值。这里 \A 是什么呢有一个 Unicode 字符是专门代表换行符的0x000A 。 在 CSS 中这个字符可以写作 \000A 或简化为 \A。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。而 white-space: pre; 的作用是保留元素后面的空白符和换行符结合两者就可以轻松实现在行内级元素末尾实现换行。原文Demo。增强用户体验使用伪元素实现增大点击热区按钮是我们网页设计中十分重要的一环而按钮的设计也与用户体验息息相关。让用户更容易的点击到按钮无疑能很好的增加用户体验尤其是在移动端按钮通常都很小但是有时由于设计稿限制我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢这里伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现我们可以这样写12345678.btn::befoer{content:;position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;}当然在 PC 端下这样子看起来有点奇怪但是合理的用在点击区域较小的移动端则能取到十分好的效果效果如下more magic -- 单标签图案上面介绍的是伪元素众多用法的一部分伪元素的作用远不止于此。有了before 、after 两个伪元素。一个标签其实可以相当于 3 个标签来使用而配合 CSS3 强大的 3D 变换、多重背景多重阴影等手段让单标签作画成为了可能下面是我仅用单个标签实现的一些动画效果单标签实现浏览器图标单标签天气图标