详解CSS伪元素的妙用单标签之美-前端开发

本文主要讲述一下CSS伪元素before和after的各种妙用，对此感兴趣的同学，可以参考下。

:before和::before的区别
哪些标签不支持伪元素？
利用 after 清除浮动
伪元素与css sprites 雪碧图
单个颜色实现按钮 hover 、active 的明暗变化
变形恢复
伪元素实现换行，替代br换行标签
增强用户体验，使用伪元素实现增大点击热区
more magic -- 单标签图案

:before和::before的区别

在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。


#id:after{
 ...
}
#id::after{
 ...
}

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

更加具体的信息，可以看看 MDN 对伪类和伪元素的理解。

本文的主角就是伪元素 before 和 after ，下面将具体讲讲这两个伪元素的魅力。

哪些标签不支持伪元素？

我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。

伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。

诸如 <img> 、<input>、<iframe>，这几个标签是不支持类似 img::before 这样使用。

究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。

利用 after 清除浮动

这个估计是前端都知道，运用 after 伪元素清除页面浮动，不做过多解释。


.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

伪元素与css sprites 雪碧图

这个也是老姿势了。雪碧图大家应该也不陌生，通过将多个图片 icon 合为一张图，从而为了减少 http 请求，很多网站对雪碧图的需求还是很大的。

但是在制作雪碧图的过程中，或者现在很多的打包工具自动生成的雪碧图，都存在着需要为每个 icon 需要预留多少边距的问题。看看下图：

单个颜色实现按钮 hover 、active 的明暗变化

最近项目有个这样的需求，根据不同的业务场景，运营需要配置一个按钮的不同背景色值。但是我们知道，一个按钮通常而言是有 3 个色值的，normal 状态的，hover 状态的和 active 状态的，通常 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:"";
}

变形恢复

有的时候，设计师们希望通过一些比较特殊的几何图形，表达不同的意思。

伪元素实现换行，替代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 端下这样子看起来有点奇怪，但是合理的用在点击区域较小的移动端则能取到十分好的效果，效果如下：

more magic -- 单标签图案

上面介绍的是伪元素众多用法的一部分，伪元素的作用远不止于此。有了before 、after 两个伪元素。一个标签其实可以相当于 3 个标签来使用，而配合 CSS3 强大的 3D 变换、多重背景，多重阴影等手段，让单标签作画成为了可能，下面是我仅用单个标签，实现的一些动画效果：

单标签实现浏览器图标：

以上就是详解CSS伪元素的妙用单标签之美的详细内容，更多关于CSS伪元素的妙用单标签之美的资料请关注编程学习网其它相关文章！

目录