【CSS进阶】伪元素的妙用--单标签之美
正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各种妙用。
:before和::before的区别
在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。
有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。
|
1 2 3 4 5 6 |
|
单冒号(:)用于 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 伪元素清除页面浮动，不做过多解释。
|
1 2 |
|
伪元素与 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 的时的明暗变化。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
戳我看demo （请用 Chrome 浏览器打开）。
变形恢复
有的时候，设计师们希望通过一些比较特殊的几何图形，表达不同的意思。
用 CSS3 transfrom 属性，我们可以轻松的得到一个梯形，菱形或者平行四边形。有时我们设计师们希望在这些容器内配上文字，譬如平行四边形可以表达一种速度之感。
但是如上图所示，内容文字也会跟着 CSS3 变换一起发生了扭曲，通常我们会用一个 div 做背景进行变换，而文字则是放在另外一个 div 中。
但是运用伪元素，我们可以去掉这些不合语义化多余的标签，运用 before 伪元素，将 CSS3 变换作用于伪元素上，这样变形不会作用于位于 div 上的的文字，而且没有使用多余的标签。
戳我看demo （请用 Chrome 浏览器打开）。
伪元素实现换行，替代<br>换行标签
大家都知道，块级元素在不脱离正常布局流的情况下是会自动换行，而行级元素则不会自动换行。但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用 <br/> 换行标签解决。而 《CSS SECRET》 中对 <br /> 标签的描述是，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码。 想想自己敲代码以来，用的 <br/> 标签还真不少。
运用 after 伪元素，可以有一种非常优雅的解决方案：
|
1 2 3 4 |
|
通过给元素的 after 伪元素添加 content 为 "\A" 的值。这里 \A 是什么呢？
有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 "\000A"， 或简化为 "\A"。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。
而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在行内级元素末尾实现换行。
原文Demo。
增强用户体验，使用伪元素实现增大点击热区
按钮是我们网页设计中十分重要的一环，而按钮的设计也与用户体验息息相关。让用户更容易的点击到按钮无疑能很好的增加用户体验，尤其是在移动端，按钮通常都很小，但是有时由于设计稿限制，我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？
这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现，我们可以这样写：
|
1 2 3 4 5 6 7 8 |
|
当然，在 PC 端下这样子看起来有点奇怪，但是合理的用在点击区域较小的移动端则能取到十分好的效果，效果如下：
more magic -- 单标签图案
上面介绍的是伪元素众多用法的一部分，伪元素的作用远不止于此。有了before 、after 两个伪元素。一个标签其实可以相当于 3 个标签来使用，而配合 CSS3 强大的 3D 变换、多重背景，多重阴影等手段，让单标签作画成为了可能，下面是我仅用单个标签，实现的一些动画效果：
单标签实现浏览器图标：
单标签天气图标：
CSS3奇思妙想，采用单标签完成各种图案 -- Demo （请用 Chrome 浏览器打开，非常值得一看）。
也希望觉得不错的同学顺手在我的 Github 点个 star ： CSS3奇思妙想 。
喜欢的可以关注面试小程序哟
【CSS进阶】伪元素的妙用--单标签之美相关推荐
- 伪元素的本质，以及伪元素的妙用（下）
伪元素的本质,及妙用 好了,上期讲解了什么是伪类,这期呢,我们来看看伪元素是什么? 我们可以看到,很多网站对它的定义为,用于向某些选择器设置特殊效果,这句话,真的是我还是不明白它在讲什么,太简洁了,我 ...
- css 选择器 伪元素_CSS伪元素-解释选择器之前和之后
css 选择器 伪元素 选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
- css after支持ie8,CSS使用伪元素:before,:after生成内容及IE兼容问题
1. CSS伪元素(pseudo-element)和伪类(pseudo-class) CSS2.1中的伪类有: :link :visited :hover :focus :acvtive :fir ...
- 触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
- CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
- css在中元素添加元素,css - 在伪元素内容中添加换行符到:: after或:: before
css - 在伪元素内容中添加换行符到:: after或:: before 我无法访问页面的HTML或PHP,只能通过CSS进行编辑. 我一直在网站上进行修改并通过content或::before伪元 ...
- 了解css中伪元素 before和after的用法
层叠样式表(CSS)主要用于将样式应用于HTML标签,但是在某些情况下,向文档添加额外标签元素是多余的或不可能的,CSS中实际上有一个特性允许我们在不中断实际文档的情况下添加额外标签,即伪元素. 你听 ...
- 伪类和伪元素的区别，以及伪元素的妙用（上）
伪类到底是什么呢,与伪元素又有啥关联呢 小白程序员-博客第二篇 说到伪类和伪元素呢,这里可能就跟读者们唠叨一下啦,伪类和伪元素到底有什么渊源呢,上面文章说到伪元素可以清除浮动,其实呀,伪元素的功能不止 ...
- CSS常用伪元素详解
1. 伪元素概念 CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的.伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法 ...
最新文章
- Apache Kafka-max.poll.interval.ms参数含义说明
- 制作可以自动隐藏的弹出式菜单
- Oracle 原理：高水位线、PCTFREE、PCTUSED、索引组织表、簇表、临时表
- 【oracle】dbms_output：控制台输出
- 安卓进阶系列-03上弹选择框(PopupDialog)的使用
- python中s和t是两个集合、对s|t描述正确的是_全国计算机等级考试二级教程--python语言程序设计（2018年版）第六章：组合数据类型...
- linux 性能测试iostat,Linux性能分析之二（iostat）
- 21. PE结构-PE各个结构的基本概念
- 利用http-server测试vue-cli打包后的项目
- 热烈庆贺产品站点开通。正在建设中...
- SpringMVC结合ajaxfileupload文件无刷新上传
- android 关机 流程_Android 关机（reboot）流程
- mdpi Algorithms 期刊word 模板下载
- 武汉Web前端开发薪水没有别人高？先弄明白这4点
- 整理了18个可以免费学习编程的网站
- HTML5滑动(swipe)事件,HTML5教程 滑动（swipe）事件学习
- Vue.js删除子组件数据显示异常，重新销毁创建子组件
- Ubuntu 11.10安装QQ2012
- OpenCV C++案例实战二十九《遥感图像分割》
- VoLTE通话相关技术