详解CSS伪元素的妙用单标签之美


Posted in HTML / CSS onMay 25, 2021

:before和::before的区别

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

详解CSS伪元素的妙用单标签之美

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

#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 需要预留多少边距的问题。看看下图:

详解CSS伪元素的妙用单标签之美

详解CSS伪元素的妙用单标签之美

譬如上面这种情况(假设按钮中的图标是采用了雪碧图),产品某天突然要求按钮从状态左变为状态右,那么雪碧图原先预留的位置边距肯定就不够了,导致其他图形出现在按钮中。

而我们通常不会为了一个小 icon 多添加一个标签(不符合语义化)。

所以通常这种情况需要用到雪碧图的话,都是在按钮中设置一个伪元素,将伪元素的高宽设置为原本 icon 的大小,再利用绝对定位定位到需要的地方,这样无论雪碧图每个 icon 的边距是多少,都能够完美适应。

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

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

大概是这样(下图):

详解CSS伪元素的妙用单标签之美

为了减轻运营同学的负担,怎么样做到只配置一个背景色不配置 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:"";
}

变形恢复

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

详解CSS伪元素的妙用单标签之美

详解CSS伪元素的妙用单标签之美

详解CSS伪元素的妙用单标签之美

用 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 端下这样子看起来有点奇怪,但是合理的用在点击区域较小的移动端则能取到十分好的效果,效果如下:

详解CSS伪元素的妙用单标签之美

more magic -- 单标签图案

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

单标签实现浏览器图标:

详解CSS伪元素的妙用单标签之美

详解CSS伪元素的妙用单标签之美

详解CSS伪元素的妙用单标签之美

单标签天气图标:

详解CSS伪元素的妙用单标签之美

详解CSS伪元素的妙用单标签之美

详解CSS伪元素的妙用单标签之美

以上就是详解CSS伪元素的妙用单标签之美的详细内容,更多关于CSS伪元素的妙用单标签之美的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
浅谈由position属性引申的css进阶讨论
详解CSS玩转图片Base64编码
详解CSS不定宽溢出文本适配滚动
May 24 #HTML / CSS
如何在CSS中绘制曲线图形及展示动画
详解盒子端CSS动画性能提升
css背景和边框标签实例详解
详解CSS开发过程中的20个快速提升技巧
You might like
php如何获取文件的扩展名
2015/10/28 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python的re模块使用方法详解
2019/07/26 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
深圳茁壮笔试题
2015/05/28 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
大学毕业生工作的自我评价
2013/10/01 职场文书
生物制药自我鉴定
2014/01/25 职场文书
上班打牌检讨书
2014/02/07 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
需求分析说明书
2014/05/09 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
交警失职检讨书
2015/01/26 职场文书
单独二胎证明
2015/06/24 职场文书
导游词之天下银坑景区
2019/11/21 职场文书