css伪元素的使用介绍

:before和::before的区别

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

1.jpg

2.jpg

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 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 需要预留多少边距的问题。看看下图:

3.jpg

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

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

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

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

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

大概是这样(下图):

1.gif

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

变形恢复

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

4.jpg

用 CSS3 transfrom 属性,我们可以轻松的得到一个梯形,菱形或者平行四边形。有时我们设计师们希望在这些容器内配上文字,譬如平行四边形可以表达一种速度之感。

但是如上图所示,内容文字也会跟着 CSS3 变换一起发生了扭曲,通常我们会用一个 div 做背景进行变换,而文字则是放在另外一个 div 中。

但是运用伪元素,我们可以去掉这些不合语义化多余的标签,运用 before 伪元素,将 CSS3 变换作用于伪元素上,这样变形不会作用于位于 div 上的的文字,而且没有使用多余的标签。

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

2.gif

more magic -- 单标签图案

上面介绍的是伪元素众多用法的一部分,伪元素的作用远不止于此。有了before 、after 两个伪元素。一个标签其实可以相当于 3 个标签来使用.

而配合 CSS3 强大的 3D 变换、多重背景,多重阴影等手段,让单标签作画成为了可能,下面是我仅用单个标签,实现的一些动画效果:

单标签实现浏览器图标:

5.jpg

单标签天气图标:

6.JPG

Image placeholder
前端答疑
未设置
  87人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery如何获取html元素的内容?

jquery如何获取html元素的内容?一、text():设置或返回所选元素的文本内容文本信息 $('#p').text();//文本信息 $('#p').text('新的文本');二、html()

jquery如何获取隐藏元素的高度?

jquery如何获取隐藏元素的高度?jquery获取隐藏元素的高度可以直接使用height()方法。例如: #app{ width:100px; height:1000px; display:no

jquery如何获取当前元素的位置?

jquery获取当前元素的位置,并且是相对于文档的位置。我们可以使用jQueryoffset()方法来实现。offset()方法仅适用于可见元素。下面我们结合简单的代码,给大家介绍jquery获取当前

HTML中行内元素与块级元素区别有什么?

HTML中行内元素与块级元素区别有什么?区别有:●行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的。●块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列。●行内元素不可

块级元素和行级元素

块级标签:divph1-h6ulol等,行内标签:aspan等行内块标签:imginputbutton等. ####行内块特点: 1.不独占一行 2.可以设置宽高

行内元素与块级元素

用途:页面布局 块级元素独占一行,行内元素在同一行。块级元素占用宽度100%,行内元素有内容决定。块级元素可以设置宽高,行内元素不行。 块级元素标签h1-h6pdiv行内元素标签:spanaemib

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

css3实现元素不停旋转

css3实现元素不停旋转主要使用了@keyframes和animation,以及指定infinite,播放次数不限来实现。HTML代码如下: HTML中文网 CSS代码如下:(相关课程推荐:css视

css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对

css如何去掉html元素

css如何去掉html元素css无法将html元素完全的从页面中去除,但是可以通过一些方法让它们在视觉上隐藏掉。具体的做法是设置元素css属性display:none和visibility:hidde

jq设置css让元素不显示

jq设置css让元素不显示使用jQuery设置元素的css属性,需要使用.css()方法,具体操作如下:$("#id").css("display","none");//隐藏 $("#id").css

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

css怎样给元素加入边框?

css怎样给元素加入边框?css给元素设置边框使用border属性,这是一个简写属性,分别是指边框的宽度、样式、颜色。它可以按顺序设置如下属性:border-widthborder-stylebord

表单元素无法继承CSS font字体设置详解

课程推荐:Java开发工程师--学习猿地精品课程 编者:CSS里面表单元素input,button,textarea,select等并不继承body的字体设置,它会使用系统或者浏览器自身的设置。通过这

深入理解css行内元素

课程推荐:前端开发工程师--学习猿地精品课程 一些前置知识替换/非替换元素替换元素不直接显示html元素内容的元素,如img、input、iframe等替换元素尺寸video、iframe等默认宽高为

css如何设置元素水平垂直居中显示

课程推荐:PHP开发工程师--学习猿地精品课程 首先我们来介绍以下两个属性: 1、text-align是设置元素中文字的水平对齐方式。 它的作用对象是文本,控制文本,对块状元素等不起效果,只能让块元素

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css Media媒体查询深入介绍

媒介类型在CSS2中,媒体查询只使用于和标签中,以media属性存在media属性用于为不同的媒介类型规定不同的样式screen计算机屏幕(默认值)tty电传打字机以及使用等宽字符网格的类似媒介tv电

选择器和介绍CSS布局笔记

css选择器: 1.元素选择器,例如:p{}; 2.类选择器,例如:.box{}; 3.ID选择器,例如:#box{};

Elasticsearch分词器介绍、内置分词器及配置中文分词器

1、分词器、分词器是从一串文本中切分一个个的词条,并对每个词条进行标准化,包含三个部分: characterfilter:分词之前的预处理,过滤掉HTML标签、特殊符号转换(例如,将&符号转换成and

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

不使用JavaScript创建常见UI元素功能

我们已经习惯于用JavaScript编写常见的UI元素功能(如手风琴、工具提示、文本截断等),但是随着HTML和CSS有了新的功能以及旧版浏览器不再受支持,我们越来越少使用JavaScript来创建U

SSH(Secure Shell)介绍

SSH(SecureShell)介绍 SSH安装 查看是否已安装: CentOS:rpm-qa|grepopenssh Ubuntu:dpkg-l|grepopenssh 安装: CentOS6:s