利用伪元素和css3实现鼠标移入下划线向两边展开效果
一、思路：
将伪元素:before和:after定位到元素底部中间，设置宽度从0变成100%达到目的。
二、实现：
1、首先定义一个块状元素（行内元素没有宽高）并修改样式为一个背景色为浅灰色的矩形，设置相对定位。
html代码
<div id="underline"></div> css样式
#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
2、设置:before和:after两个伪元素，将其设置为背景色为蓝色（也就是下划线的颜色），利用绝对定位将两个元素固定到#underline底部中间位置。
css样式
#underline:before,
#underline:after{
content: "";/*单引号双引号都可以，但必须是英文*/
width: 0;
height: 3px; /*下划线高度*/
background: blue; /*下划线颜色*/
position: absolute;
top: 100%;
left: 50%;
transition: all .8s ; /*css动画效果，0.8秒完成*/
}
3、设置鼠标移入效果。
css样式
#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/
left:0%;
width:50%;
}
#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/
left: 50%; /*这句多余，主要是为了对照*/
width: 50%;
}
三：优化
1、虽然目的达到了，但是用了两个伪元素，一个向左延伸50%，一个向右延伸50%，只用一个延伸至100%能否达到目的呢？
css代码
#underline:after{
content: "";
width: 0;
height: 5px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{/*原理是left:50%变成0%的同时，宽度从0%变成100%*/
left: 0%;
width: 100%;
}
2、只定义:after伪元素，将其从距离左边50%宽度为0的同时改变成距离左边0%宽度为100%就可以实现，从而达到了精简代码的目的，而且还多余出了:before方便进行别的操作。
四、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
<style type="text/css">
#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
#underline:after{
content: "";
width: 0;
height: 5px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{
left: 0%;
width: 100%;
}
</style>
</head>
<body>
<div id="underline"></div>
</body>
</html>
五、兼容性问题
才疏学浅，以后遇到了再补充。
利用伪元素和css3实现鼠标移入下划线向两边展开效果的更多相关文章
- 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果
原帖地址 https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...
- 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式
最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...
- 利用伪元素before实现自定义checkbox样式
原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- 利用伪元素:after清除浮动
一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- CSS练习-导航栏斜线分隔-利用伪元素
开始切第一张图了,第一个遇到的问题是顶部导航栏这里,用斜线分割.想到的思路是用伪类:before或者:after实现 先写html结构. <!-- 导航栏begin --> <div ...
- 利用css实现鼠标经过元素，下划线由中间向两边展开
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- MySQL C#教程
这是关于MySQL数据库的C#教程,包含了对MySQL数据库基本操作: 数据库访问组件MySql Connect/NET MySql Connect/NET是MySQL官方提供给C#的接口,封装的非常 ...
- iOS热更新技术被苹果官方警告？涉及到RN、Weex、JSPatch！！！
今天一早,不少iOS开发群都炸窝了,原因是部分iOS开发者收到了苹果的警告邮件: 有开发者质疑可能是项目中使用了JSPatch.weex以及ReactNative等热更新技术.对于修复bug提交审核的 ...
- Compare Version Numbers leetcode
Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...
- 基于 Koa平台Node.js开发的KoaHub.js的跳过组件代码
koahub-skip koahub skip middleware koahub skip Conditionally skip a middleware when a condition is m ...
- 算法模板——Dinic最小费用最大流
实现功能:输入M,N,S,T:接下来M行输入M条弧的信息(包括起点,终点,流量,单位费用):实现功能是求出以S为源点,T为汇点的网络最大流的最小费用 其实相当的像Dinic最大流呐= = 还是spfa ...
- 1677: [Usaco2005 Jan]Sumsets 求和
1677: [Usaco2005 Jan]Sumsets 求和 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 626 Solved: 348[Submi ...
- Gridview AutoGenerateColumns属性
第一篇随笔,以后会陆续的把刚开始工作时的知识点都记录下来,毕竟现在用WebForm的不多了~ AutoGenerateColumns MSDN 说明 : 获取或设置一个值,该值指示是否为数据源中的每个 ...
- Canvas的下雪效果
cfs.snow.js canvas 下雪场景 不会影响页面使用 使用方式非常简单 利用这个js文件,我们就能很快的让页面出现下雪的动画效果. 例如 <script type="tex ...
- 解决！同一ajax请求获取的图片路劲，在谷歌浏览器能正确展示图片，在火狐浏览器则显示路径undefined
今天的工作学习之路是解决了昨天的问题,可看我昨天的随笔了解问题. 非常感谢昨天各位积极地解答,在此我引用 @不带汽的可乐 的方法进行解决,问题其实挺简单就解决了,先说说原因,在火狐浏览器中,当我在js ...
- JavaScript实现常见排序算法
列表 冒泡排序 选择排序 插入排序 快速排序 希尔排序 归并排序 冒泡排序 // 输入:[5, 6, 3, 4, 8, 0, 1, 4, 7] // 输出:[0, 1, 3, 4, 4, 5, 6, ...