2021-4-29 工作记录--CSS-鼠标划过文字时,文字下方出现往两边延伸的下划线 + 鼠标划过文字,文字下面的下划线向中间消失;鼠标离开文字,文字下面的下划线向两边延申出现

article/2025/7/12 1:13:39

一、CSS-鼠标划过文字时,文字下方出现往两边延伸的下划线

方法1:

举例:

HTML:
在这里插入图片描述
CSS:
在这里插入图片描述
对应代码:

//css鼠标划过文字出现往两边延伸的下划线
.header_l li  a,
.header_r li:not(:last-child)  a {position: relative;padding: 14px 0;
}
.header_l li  a::before,
.header_r li:not(:last-child)  a::before {content: '';position: absolute;width: 100%;height: 2px;bottom: 0;left: 0;background-color: #191e69;visibility: hidden;transform: scaleX(0);transition: all .3s ease-in-out 0s;
}
.header_l li  a:hover::before,
.header_r li:not(:last-child)  a:hover::before {visibility: visible;transform: scaleX(1);
}

结果:
在这里插入图片描述
【详情可参考大佬的CSDN:https://blog.csdn.net/Bonjours/article/details/103663618

方法2:

举例:
在这里插入图片描述
对应代码:

.addHeader_con_text_r_first {position: relative;
}
.addHeader_con_text_r_first:before {content: '';position: absolute;right: 0;bottom: -0.05rem;width: 3.3rem;height: (1rem / @fontSize);background-color: #4d4d4d;transition: all .3s ease-in-out 0s;
}
.addHeader_con_text_r_first:hover:before { // 表示当鼠标经过的时候transform: scaleX(1);
}
.addHeader_con_text_r_first:not(:hover):before { // 表示当鼠标离开的时候transform: scaleX(0);
}

二、

css鼠标划过文字,文字下面的下划线向中间消失;
css鼠标离开文字,文字下面的下划线向两边延申出现

举例:
在这里插入图片描述
对应代码:

.footer_h p:nth-child(2) {position: relative;margin-bottom: 0.2rem;
}
.footer_h p:nth-child(2):before {content: '';position: absolute;left: 0;bottom: 0;width: 8.4rem;height: 0.015625rem;background-color: #fffefe;transition: all .3s ease-in-out 0s;
}
.footer_h p:nth-child(2):hover:before { // 当鼠标经过的时候transform: scaleX(0);
}
.footer_h p:nth-child(2):not(:hover):before { // 表示当鼠标离开的时候transform: scaleX(1);
}

结果:

默认状态:
在这里插入图片描述
鼠标经过后状态:
在这里插入图片描述
鼠标离开后状态:
在这里插入图片描述

补充知识:

CSS中:
:hover 表示鼠标经过的时候;
:not(:hover) 表示鼠标离开的时候。
在这里插入图片描述
在这里插入图片描述


http://chatgpt.dhexx.cn/article/gwtFKtBx.shtml

相关文章

html+导航栏+点击下划线,html导航栏点击后出现下划线_【Word教程】教你制作输入文字依然对齐的封面下划线......

点击上方“祕技”,关注我们 ~助你提升工作技能~ 阅读全文大约需10分钟 在学习和生活中,使用word进行封面制作是很常见的应用场景,而下划线又是封面中不可缺少的元素。 很多同学在制作下划线时采用的是“空格下划线”的方法&#x…

论文封面标题下划线制作

一、问题描述 学校发的模板在填写信息的时候,下划线总是填写多少字就延长多少,文字前后加上空格 (这样线是变长的)是因为他用了文字下划线法; 二、制作方法 先将文字信息罗列出来 统一调整字符宽度 按照最长的字符长…

你不知道的下划线属性-text-decoration

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号&…

html中加长下滑线,css怎么设置下划线的长度?

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 自定义下划线。使用:after,首先添加一个空的内容,为了让它排列到标题的下面&#…

七彩视界开源全解公益版,全新后台非常漂亮,全网首发!

苍穹影视V20七彩视界开源全解公益版,全新后台非常漂亮,全网首发! 苍穹影视V20七彩视界开源全解公益版,全新后台非常漂亮内有安装教程 下载地址:https://www.lanzoux.com/iiENsex40lc 注苍穹网络

新版七彩苹果ios推荐影片播放变返回按钮解决

收到用户反映,新版七彩苹果ios首页底部的推荐影片播放变成返回按钮问题 解决方法如下:打开前端文件搜索并进入路径 /html/video/play_UIBPlayer_recommend_for_ios_main 打开文件找到第437行 437行最前边打上单行注释// 即可解决问题 本文转载&…

七彩影视四个步骤去除CMS教程

网传七彩源码原生播放器苹果端cms有问题,有能力自己修复,没能力请删除cms 下面由浪杉博客提供教程,将框选代码直接删除,数字往上推即可! 文件分别是 /index.html ./script/vedio_controller.js 本文转载&#xff0c…

新版七彩影视修复二级返佣修改重置问题

近期收到反馈新七彩影视多端版二级返佣修改不了,无论怎么修复都是重置20%比例 现在浪杉博客这边教大家如何修改: 首先找到路径: /application/index/controller/Index.php 打开文件后搜索 agent_rebate_c 搜索到后会自动跳转位置&#xff…

黄河千年清一回与人类健康

黄河千年清一回奏响一曲曲让人类走进幸福新时代的壮丽凯歌。疫情之后的首届全世界健康产业发展大会 5 月28 日上午 9 时在中国首都北京召开 The Yellow River has played a magnificent song of triumph in the millennium, ushering humanity into a new era of happiness. T…

广东金龄会垮省文旅游——走进七彩云南昆明融创

(本栏目记者实况报道)近日由广东省健康金龄公益演艺委员会联合昆明融创文旅城,共同组织的两省中老年文艺交流活动,在昆明融创正式拉开序幕,此次活动旨在响应国家新型养老爱老服务体系,将文旅与演艺结合&…

Android 程序员不得不收藏的个人博客(持续更新...)

微信不支持外链,请点击原文查看文中链接。 本文已收录我的 Github ,持续更新中 ,欢迎点赞 ! 每周打开一次收藏夹里的个人博客,已经成为了我的人生一大乐趣。 相比各大博客平台,我一直更加偏爱个人博客。在每…

小米Civi 1S 定价2299元起,主打美颜,让你上镜自由

4月21日,小米正式发布小米Civi 1S和小米智能家庭屏10两款重磅新品。 小米Civi 1S是专为年轻人打造的潮流手机,带来外观、美拍和流畅三大升级。外观加入行业稀缺的奇迹阳光(白色)配色,阳光下能够呈现绚丽的七彩效果。 …

为何恒星/太阳(辐射)可以被视为黑体(辐射)?

文章目录 1. 黑体与黑体辐射的概念1.1 黑体1.2 黑体的实现1.3 黑体辐射1.4 黑体辐射概念的应用1.5 黑体辐射相关历史 2. 恒星(太阳)内部的情况2.1 太阳内部情况2.2 太阳辐射光谱2.3 高分辨率太阳光谱 3. 关于恒星(辐射)是否可以被…

七彩影视双端新版本源码

简介: 七彩双端新版本源码 支持PCWAPAPP三端 对接苹果CMS后台 网盘下载地址: http://kekewl.org/eas65KcT9de0 图片:

苍穹影视V20七彩视界免sq源码 kyuan源码

介绍: 1.修改后台数据库文件application/database.php 2.导入数据库,PHP安装扩展:rides/sg113.前端修改config.xml中相关信息 3. 注册apicloud,使用小乌龟上传前端文件,添加所有模块,完成前端安装 4. 后台账号admin密…

苍穹影视V20七彩视界免授权开源源码

介绍: 1.修改后台数据库文件application/database.php 2.导入数据库,PHP安装扩展:rides/sg11 3.前端修改config.xml中相关信息 3. 注册apicloud,使用小乌龟上传前端文件,添加所有模块,完成前端安装 4. 后台账号admin密…

新版七彩视界影视双端百果深海蓝UI前端主题

新版七彩影视双端源码百果深海蓝UI前端主题 1.修复后端报错泄露数据库信息。 2.修复对接苹果cms对接安全接口。 3.修复前端官解换线卡顿或延迟重音问题。 4.修复切换线路延迟卡死不能返回问题,秒切线路更加流畅。 5.修复芒果换集无法识别线路跳转通用线路问题。 6.修…

java实现手机短信验证全过程

点个赞,看一看,好习惯!本文 GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了 3 个月总结的一线大厂 Java 面试总结,本人已拿大厂 offer。 另外,原创文章首发在我的个人博客&#x…

安卓手机短信

前提--权限&#xff1a; [java] view plain copy <uses-permission android:name"android.permission.RECEIVE_SMS" > </uses-permission> <uses-permission android:name"android.permission.READ_SMS" > </uses-permission&…

想为自己的网站添加短信验证怎么弄_捷径教程讲解一云手机短信验证码接受平台的聚合...

除了最初发表的以"熔岩音乐"和"流利阅读"为范本&#xff0c;以及初学者入门点这里&#xff0c;内容太过于巨细靡遗&#xff0c;主要是为了给入门朋友详解相关的基本流程&#xff0c;但之后所有文章唯有对于实例的重点讲解&#xff0c;主要在于培养大家对于…