所以，我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2)，在 .btn:hover:before 时显示，用 after 伪元素生成一个与按钮大小一致的白色半透明层 rgba(255,255,255,.2)，在 .btn:active:before 时显示，就可以做到只配置一个背景底色，实现hover 、active 的时的明暗变化。
.pesudo:before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:-1; background:rgba(0,0,0,.1); } .pesudo:hover:before{ content:""; } .pesudo:after{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:-1; background:rgba(255,255,255,.2); } .pesudo:active:after{ content:""; }
变形恢复有的时候，设计师们希望通过一些比较特殊的几何图形，表达不同的意思。
用 CSS3 transfrom 属性，我们可以轻松的得到一个梯形，菱形或者平行四边形。有时我们设计师们希望在这些容器内配上文字，譬如平行四边形可以表达一种速度之感。
但是如上图所示，内容文字也会跟着 CSS3 变换一起发生了扭曲，通常我们会用一个 div 做背景进行变换，而文字则是放在另外一个 div 中。
但是运用伪元素，我们可以去掉这些不合语义化多余的标签，运用 before 伪元素，将 CSS3 变换作用于伪元素上，这样变形不会作用于位于 div 上的的文字，而且没有使用多余的标签。
伪元素实现换行，替代br换行标签大家都知道，块级元素在不脱离正常布局流的情况下是会自动换行，而行级元素则不会自动换行。但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用 <br/> 换行标签解决。而 《CSS SECRET》 中对 <br /> 标签的描述是，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码。想想自己敲代码以来，用的 <br/> 标签还真不少。
运用 after 伪元素，可以有一种非常优雅的解决方案：
.inline-element::after{ content: "\A"; white-space: pre; }
通过给元素的 after 伪元素添加 content 为 "\A" 的值。这里 \A 是什么呢？
有一个 Unicode字符是专门代表换行符的：0x000A。在CSS中，这个字符可以写作"\000A"，或简化为"\A"。这里我们用它来作为::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。
而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在行内级元素末尾实现换行。
增强用户体验，使用伪元素实现增大点击热区按钮是我们网页设计中十分重要的一环，而按钮的设计也与用户体验息息相关。让用户更容易的点击到按钮无疑能很好的增加用户体验，尤其是在移动端，按钮通常都很小，但是有时由于设计稿限制，我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？
这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现，我们可以这样写：
.btn::befoer{ content:""; position:absolute; top:-10px; right:-10px; bottom:-10px; left:-10px; }
当然，在 PC 端下这样子看起来有点奇怪，但是合理的用在点击区域较小的移动端则能取到十分好的效果，效果如下：
上面介绍的是伪元素众多用法的一部分，伪元素的作用远不止于此。有了before 、after 两个伪元素。一个标签其实可以相当于 3 个标签来使用，而配合 CSS3 强大的 3D 变换、多重背景，多重阴影等手段，让单标签作画成为了可能，下面是我仅用单个标签，实现的一些动画效果：
单标签实现浏览器图标：
单标签天气图标：
以上就是详解CSS伪元素的妙用单标签之美的详细内容，更多关于CSS伪元素的妙用单标签之美的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: