【CSS进阶】伪元素的妙用--单标签之美

最近在研读 《CSS SECRET》（CSS揭秘）这本大做，对 CSS 有了更深层次的理解，折腾了下面这个项目：

CSS3奇思妙想 -- Demo （请用 Chrome 浏览器打开，很是值得一看）。采用单标签完成各类图案，许多图案与本文有关。

也但愿以为不错的同窗顺手在个人 Github 点个 star ： CSS3奇思妙想 。

 

正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各类妙用。

   :before和::before的区别

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

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。

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

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

因此，若是你的网站只须要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，若是不得不兼容 IE 浏览器，仍是用 CSS2 的单冒号写法比较安全。

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

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

 

   哪些标签不支持伪元素？（补充于2016.06.28）

我也是才知道这个姿式。为了避免误导读者，就赶忙补充一下。

伪元素虽然强大，可是仍是有一些特定的标签是不支持伪元素 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 须要预留多少边距的问题。看看下图：

--> 

譬如上面这种状况（假设按钮中的图标是采用了雪碧图），产品某天忽然要求按钮从状态左变为状态右，那么雪碧图原先预留的位置边距确定就不够了，致使其余图形出如今按钮中。

而咱们一般不会为了一个小 icon 多添加一个标签（不符合语义化）。

因此一般这种状况须要用到雪碧图的话，都是在按钮中设置一个伪元素，将伪元素的高宽设置为本来 icon 的大小，再利用绝对定位定位到须要的地方，这样不管雪碧图每一个 icon 的边距是多少，都可以完美适应。

 

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

最近项目有个这样的需求，根据不一样的业务场景，运营须要配置一个按钮的不一样背景色值。可是咱们知道，一个按钮一般而言是有 3 个色值的，normal 状态的，hover 状态的和 active 状态的，一般 hover 是比原色稍微亮一点，active 则是稍微暗一点。

大概是这样（下图）：

为了减轻运营同窗的负担，怎么样作到只配置一个背景色不配置 hover 和 active 颜色让按钮也能自适应跟随变化呢。是的，用上 before、after 两个伪元素能够作到。

颜色小知识

这里要科普一下颜色值的小知识。咱们熟知的颜色表示法除了 #fff ，rgb(255,255,255)，还有 hsl(0, 100%, 100%)（HSV）。 

以 HSL 为例，它是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

对于一个使用 HSL 表示的颜色，咱们只须要改变 L （亮度）的值，就能够获得一个更亮一点或者更暗一点的颜色。

固然改变亮度，还能够经过叠加透明层实现，这里使用伪元素改变按钮背景色就是经过叠加半透明层实现。

简单来讲，在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 能够获得一个更亮的颜色。（这句话不是很严谨，假设一个元素背景是纯白颜色，叠加白色半透明层也是不会更亮的）

反之，在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 能够获得一个更暗的颜色。

因此，咱们用 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:"";
}

戳我看demo （请用 Chrome 浏览器打开）。

 

   变形恢复

有的时候，设计师们但愿经过一些比较特殊的几何图形，表达不一样的意思。

用 CSS3 transfrom 属性，咱们能够轻松的获得一个梯形，菱形或者平行四边形。有时咱们设计师们但愿在这些容器内配上文字，譬如平行四边形能够表达一种速度之感。

可是如上图所示，内容文字也会跟着 CSS3 变换一块儿发生了扭曲，一般咱们会用一个 div 作背景进行变换，而文字则是放在另一个 div 中。

可是运用伪元素，咱们能够去掉这些不合语义化多余的标签，运用 before 伪元素，将 CSS3 变换做用于伪元素上，这样变形不会做用于位于 div 上的的文字，并且没有使用多余的标签。

戳我看demo （请用 Chrome 浏览器打开）。

 

   伪元素实现换行，替代<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; 的做用是保留元素后面的空白符和换行符，结合二者，就能够轻松实如今行内级元素末尾实现换行。

原文Demo。

 

   加强用户体验，使用伪元素实现增大点击热区

按钮是咱们网页设计中十分重要的一环，而按钮的设计也与用户体验息息相关。让用户更容易的点击到按钮无疑能很好的增长用户体验，尤为是在移动端，按钮一般都很小，可是有时因为设计稿限制，咱们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮本来大小的状况下去增长他的点击热区呢？

这里，伪元素也是能够表明其宿主元素来响应的鼠标交互事件的。借助伪元素能够轻松帮咱们实现，咱们能够这样写：

.btn::befoer{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}

固然，在 PC 端下这样子看起来有点奇怪，可是合理的用在点击区域较小的移动端则能取到十分好的效果，效果以下：

   more magic -- 单标签图案

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

单标签实现浏览器图标：

 

单标签天气图标：

CSS3奇思妙想，采用单标签完成各类图案 -- Demo （请用 Chrome 浏览器打开，很是值得一看）。

也但愿以为不错的同窗顺手在个人 Github 点个 star ： CSS3奇思妙想 。

 

 

但愿这篇文章对你们有所帮助，尤为是在对问题解决的思惟层面上。

到此本文结束，若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。

若是本文对你有帮助，请点下推荐，写文章不容易。