::before和::after伪元素的妙用
场景:
假如有一天,你的在写一个前端项目,是关于一份点餐商家电话信息表,你啪塔啪塔地写完了,突然间项目经理跑过来找你,要求你在每一个商家的电话号码前都添加一个电话符号,来使得电话号码更直观和页面更美观。这个时候你就纠结了,这不是折磨人吗?这不是要我在每个电话号码前都添加一个<img>标签?这要整到猴年马月?搞不好还会出现标签浮动的问题。
这个时候::after伪元素和::before伪元素就是救星了,在css中有这么两个伪类,允许通添加伪元素在html元素前/后添加内容。
这里我简单写了一个demo
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.phone-number{
font-size: 14px;
font-weight: 600;} .phone-number::before{
content: '\260E';
font-size: 22px;
color: red;
}
</style>
</head> <body>
<div class='phone-number'> 13300000000</div>
<div class='phone-number'> 13300000001</div>
<div class='phone-number'> 13300000002</div>
<div class='phone-number'> 13300000003</div>
<div class='phone-number'> 13300000004</div>
</body>
</html>
实现的效果如下
每一个号码都有一个class属性,我只需要对这个class属性写一次css渲染层和添增上
:: before伪元素就可以实现这个功能了。显然这比一个个添加<img>标签要轻松得多。
可能有人会问,这个的符号是怎么来的?html官方规定了一些特殊符号的unicode码,具体可以看http://www.cnblogs.com/starof/p/4718550.html。
下面是:: before伪元素和:: after伪元素的具体用法和使用规则
(1)content:’()’
作用:在标签前/后添加字符串
使用规则:content后面一定要用‘’把要添加的内容括起来,否则是无法显示的(括号不一定需要添加)。
例如:
在<p>¥80元</p>之后添加如下css装饰代码:
p::after{
content:'门市价100元';
font-size: 14px;
text-decoration: line-through;
color: grey;
}
(2)content:url(‘图片地址’)
作用:在标签前/后添加图片(图片通过网络url实时加载)
使用规则:必须用url()引入需要添加的图片,道理跟background的设置一样。图片的地址也需要用‘’括起来。
例如:
在<div id='yidong-nub'>
<a href='http://www.10086.cn/images/index/logo.png'> 10086</a>
</div>
添加css装饰代码
a::before{
content:url('http://www.10086.cn/images/index/logo.png');
}
(3)清除浮动
::after{
content : ’’ ;
display:block;
}
用法是设置content的为空字符串
关于清除浮动的一些可用方法有很多种,我在这里就不展开来说了。
用人可能会说,用法(1)在p标签后面添加内容,直接在html代码里面的p标签后面再增加一个p标签不就行了吗?为什么还要用这种方法呢?
可以思考一下,通过在后面添加一个p标签,同时也需要用css代码去装饰这个新添加上去的标签。显然,代码量上,后者比前者多了,而且后者在html中新增了一个DOM节点,如果数量很多时,解析器在解析时难免会增加一定的时间。而前者没有这种问题,而且还能更好实现表现层和样式层的分离式开发。
最后值得知道的是,使用::before和::after伪元素这种添加内容的方式,只是在css渲染页面的时候添加上去的,在DOM节点上是查不到这些添加上去的内容的。所以,一般不要添加实际的内容。意味着除了文本内容和图片/icon之外的html标签是无法添加进去的。
::before和::after伪元素的妙用的更多相关文章
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- CSS :befor :after 伪元素的妙用
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- css before,after伪元素妙用
我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁. 通常写法如p::after{content:' '},其中conte ...
- CSS伪元素before、after妙用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 伪元素 before 和 after 各种妙用
大家可能对伪类和伪元素有点迷糊,在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 这里整理总结下: 有时你会发现伪类元素使 ...
随机推荐
- 3-2 模板语法(vue中的内容写法)
插值表达式.v-text.v-html的用法
- Android 系统内核层与 Linux Kernel 的比较
Android 内核具有和标准 Linux 内核一样的功能,主要实现了内存管理.进程调度.进程间通信等功能.但在文件系统.进程间通信.内存管理等方面存在差异. 1.文件系统.移动设备采用的大多不是硬盘 ...
- 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 如何优化Mysql千万级快速分页,limit优化快速分页,MySQL处理千万级数据查询的优化方案
如何优化Mysql千万级快速分页,limit优化快速分页,MySQL处理千万级数据查询的优化方案
- 图像处理之Retinex增强算法(SSR、MSR、MSRCR)
视网膜-大脑皮层(Retinex)理论认为世界是无色的,人眼看到的世界是光与物质相互作用的结果,也就是说,映射到人眼中的图像和光的长波(R).中波(G).短波(B)以及物体的反射性质有关 其中I是人眼 ...
- 团队作业4——beta阶段冲刺
Deadline: 2018-12-16 22:00PM,以博客提交至班级博客时间为准 提交: (a) 项目课堂演示: (b) 1篇冲刺准备+5篇冲刺随笔,: (c) 1篇用户使用用报告: (d) 1 ...
- SpringBoot学习(一)—— web项目基础搭建
首先我们在浏览器打开这个网站 https://start.spring.io/ 打开后可以看到以下页面 在这里我们可以快速搭建一个SpringBoot基础项目,填写和选择完相应的信息后,我们点击那个绿 ...
- WIN7 环境下搭建 PHP7(64 位)操作步骤
WIN7 环境下搭建 PHP7(64 位)操作步骤 一.安装与配置 Apache 1.下载 Apache下载地址:https://www.apachelounge.com/download/ 2.安装 ...
- SpringBoot之使用Lettuce集成Redis
一.Lettuce Redis这里就不多说,服务端的启动之前的博客里面也有提到,这里略过.Lettuce和Jedis都是连接Redis Server的客户端程序,Jedis在实现上是直连redis s ...
- SQL 查看表每一个列的名字以及类型
select a.name,b.name from sys.columns as a join sys.types as b on a.system_type_id=b.system_type_id ...