CSS :befor :after 伪元素的妙用
本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景,如填充文本、作为iconfont、进度线、时间线以及几何图形。
1. 介绍
1.1 说明
CSS中的:befor、:after都会创建一个伪元素,其中:befor创建的伪元素是所选元素的第一个子元素,:after创建的伪元素是所选元素的最后一个子元素。
:befor、:after创建的伪元素默认样式为内联样式。
1.2 语法
/* CSS3 */
selector::before /* CSS2 */
selector:before
CSS3引入了 ::(两个冒号)是用来区分伪类(:一个冒号)和伪元素(::两个冒号)。
伪类:操作元素本身,如 :hover、:first-child、:focus等等。
伪元素:操作元素的子元素,如 ::before、::after、::content等等。
在IE8中只支持:(一个冒号),所以为了兼容这些浏览器也可以使用 :befor、:after。
1.3 content属性
content 属性表示伪元素填充的内容。
示例
CSS:
.test-div {
width: 100px;
height: 100px;
margin-left: 20px;
background-color: #eee;
} .test-div::before {
content: "♥";
color: red;
} .test-div::after {
content: "♥";
color: blue;
}
HTML页面:
效果:
1.4 可替换元素
可替换元素(replaced element):其展现不由CSS来控制的。这些元素是一类外观渲染独立于CSS的对象。
典型的可替换元素有<iframe>、<img>、 <object>、 <video> 以及 表单元素,如<textarea>、 <input> 。
某些元素只在一些特殊情况下表现为可替换元素,例如 <audio> 和 <canvas> 。
:befor :after 在此类元素内是不生效的。
1.5 浏览器支持情况
IE9版本才开始完全支持 :befor :after ,Chrome、Firefox现都已全线支持。
IE | Edge | Firefox | Chrome | Android Chrome |
iOS Safari |
9 | all | 2 | all | all | all |
2. 应用场景
2.1 支持文本字符
说明:content属性支持文本字符。
示例:
2.2 支持iconfont
说明:content属性也支持iconfont字体图表的展示。这也是使用最多的场景。
示例:此示例已引用了阿里iconfont图标库
2.3 进度线与时间线
说明::befor :after创建的伪元素可以以线条方式定位在元素周边的指定位置上,如进度线和时间线。
1) 进度线
2) 时间线
2.4 几何图形
说明:通过设置 :befor :after 伪元素的border相关属性,可创建非常多的几何图形;如三角形、多边形、五角星等等。
1) 矩形
说明:默认情况下,:befor :after 伪元素的border边框属性与其他HTML元素一样。
CSS:
div::before {
width: 0px;
height: 0px;
content: '';
position: absolute;
border-top: 50px solid #f50000;
border-right: 50px solid #6cc361;
border-bottom: 50px solid #6167c3;
border-left: 50px solid #fa00d9;
}
效果:
2) 三角形
说明:显示某一方位的border,并隐藏左右2边的border(背景设置为透明),可让伪元素显示三角形的形状。
示例:
3. 扩展阅读
MDN ::before:https://developer.mozilla.org/en-US/docs/Web/CSS/::before
MDN ::after:https://developer.mozilla.org/en-US/docs/Web/CSS/::after
::before、::after介绍:https://css-tricks.com/pseudo-element-roundup/
CSS 几何图形:https://css-tricks.com/examples/ShapesOfCSS/
CSS :befor :after 伪元素的妙用的更多相关文章
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- ::before和::after伪元素的妙用
场景: 假如有一天,你的在写一个前端项目,是关于一份点餐商家电话信息表,你啪塔啪塔地写完了,突然间项目经理跑过来找你,要求你在每一个商家的电话号码前都添加一个电话符号,来使得电话号码更直观和页面更美观 ...
- CSS 基础 例子 伪元素和伪类 & 区别
一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...
- 理解 CSS 中的伪元素 :before 和 :after
CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...
- css中的伪元素,我今天记住了!o~yeah
对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中.带着 ...
- 前端 CSS的选择器 伪元素选择器
介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...
- CSS中的伪元素选择器
定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...
随机推荐
- 你不知道的JSON.stringify和JSON.parse
json是JavaScript 对象表示法(JavaScript Object Notation),是一种简单的数据格式,类似于XML,其格式为名称/值对,数据用逗号隔开,名称必须用双引号括起来.例如 ...
- Java与算法之(13) - 二叉搜索树
查找是指在一批记录中找出满足指定条件的某一记录的过程,例如在数组{ 8, 4, 12, 2, 6, 10, 14, 1, 3, 5, 7, 9, 11, 13, 15 }中查找数字15,实现代码很简单 ...
- Java与算法之(1) - 冒泡排序
冒泡排序法的原理是,每次比较相邻的两个元素,如果它们的顺序错误就把它们交换过来. 例如对4 3 6 2 7 1 5这7个数字进行从小到大的排序,从最左侧开始,首先比较4和3 因为是从小到大排序,4和3 ...
- echarts饼图点击事件
/** * 点击事件 */myChart2.on('click', function (param) { var index = param.dataIndex; alert(index);});
- [51nod1709]复杂度分析
给出一棵n个点的树(以1号点为根),定义dep[i]为点i到根路径上点的个数.众所周知,树上最近公共祖先问题可以用倍增算法解决.现在我们需要算出这个算法精确的复杂度.我们定义计算点i和点j最近公共组先 ...
- NEFU_117素数个数的位数
题目传送门:点击打开链接 Problem : 117 Time Limit : 1000ms Memory Limit : 65536K description 小明是一个聪明的孩子,对数论有着很浓烈 ...
- Windows系统下文件的概念及c语言对其的基本操作(甲)
文件概念
- linux(CENTOS)系统各个目录的作用详解
Linux(CentOS)系统各个目录的作用详解 文件的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.S ...
- Java应用开发中的字符集与字符编码
事出有因 在向HttpURLConnection的输出流写入内容时,因没有设置charset,导致接收方对数据的验签不一致. URL url = new URL(requestUrl); //打开连接 ...
- OBS studio最新版配置鉴权推流
这两天在看百度的LSS音视频直播服务的sdk..sdk看了一圈,基本上只能操作个流什么的,查看流列表,域名之类的.按照百度这块的描述自己去实现这个显得不是那么明智我感觉.其次就是百度LSS的教程用的O ...