文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
1.新增伪元素选择器的原理:1):before伪元素选择器用于在被选元素的内容前面插入内容 , 必须配合content属性来指定要插入的具体内容 。 格式如下:
2):after伪元素选择器用于在被选元素的内容后面插入内容 , 必须配合content属性来指定要插入的具体内容 。 格式如下:
3.伪元素选择器的应用场景实例:1)如下图所示 , 我们可以配合字体图标进行使用 , 具体方法如下:
第一步 , 首先我们新建一个div并设置高度、宽度以及边框
第二步 , 我们将字体图标样式引进来(忘记字体图标的使用 , 可以翻看往期教程)
第三步 , 我们利用伪元素选择器将图标加进去 。 为了使图标能够靠右对齐 , 我们利用定位进行位置的设置:
2)如下图 , 我们想要实现当鼠标经过时 , 图片加上一层不透明的效果 。 具体方法如下:
第一步 , 首先我们先放一张图片 , 并设置好宽度和高度 。
第二步 , 我们创建一个伪元素 , 宽度和高度与图片相同 , 并设置颜色 。
【鼠标|HTML的应用技巧之 新增伪元素选择器】第三步 , 我们创建的伪元素由于是在div内部前面创建的 , 因此我们会发现 , 它与图片并列显示 , 因此我们将伪元素加上绝对定位 。 在鼠标经过之前是 , 不显示 。
第四步 , 当鼠标经过图像的时候 , 显示伪元素:
相关经验推荐
- 支付宝|工资一到账,就存放在支付宝或微信里,会产生怎样的后果?
- 酷睿处理器|陨落的“空调巨头”:曾远超过格力美的,如今却无人问津?
- 罗永浩|现在来看,锤子科技创业失败后的罗永浩真的穷吗?
- 交易|“13香”的充电好搭档 航嘉G30快速充电器测评
- 微信|活跃量被微信反超,曾经的“国民社交软件”,QQ为什么越混越差?
- 翻译|翻译技术和工具的应用及改进
- 跑分|神州笔记本是怎么混到今天这个地步的
- 英格索兰|英格索兰过滤器的详细使用介绍
- 空调|大疆CEO王滔:其实国产手机本质上就是一种小家电,还不如空调的门槛高
- |为什么现在家电产品的质量越来越差?