转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果
原帖地址 https://www.cnblogs.com/yangjunfei/p/6739683.html
感谢分享
一、思路：
将伪元素: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实现鼠标移入下划线向两边展开效果
一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...
- 从知乎首页用户操作入口学习到的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 ...
- 理解伪元素 :Before 和 :After
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...
随机推荐
- 【转载】redis.conf文件详解
转载地址:http://blog.csdn.net/zhutulang/article/details/51969760 Redis.conf文件可以在github上查看,下面是我整理的其中的配置项( ...
- ASP.NET’s compilation system
Compilation in ASP.NET applications First, let’s take a moment to revisit compilation in the context ...
- 优秀前端工程师必备: (总结) 清除原生ios按钮样式
写移动端的web开发时, 需要清除IOS本身的各种样式: 1.消除ios按钮原生样式, 给按钮加自定义样式: input[type="button"], input[type=&q ...
- 大致（主要hadoop）软件下载地址
jdk-8u181-linux-x64.tar.gz https://www.oracle.com/technetwork/java/javase/downloads/index.html hadoo ...
- CentOS7安装confluenceWIKI并破解汉化
关闭防火墙和selinux 开始搭建Wiki前,需要下载一些软件包. wget https://www.atlassian.com/software/confluence/downloads/bi ...
- CentOS系统中Tomcat安装配置
Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共同开发而 ...
- delphi Table切换控件顺序问题
delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...
- [LeetCode 题解]: Permutation Sequcence
The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of the p ...
- 【题解】 UVa11729 Commando War
题目大意 你有n个部下,每个部下需要完成一项任务.第i个部下需要你花Bj分钟交代任务,然后他就会立刻独立地.无间断地执行Ji分钟后完成任务.你需要选择交代任务的顺序,使得所有任务尽早执行完毕(即最后一 ...
- “全栈2019”Java第七十九章：类中可以嵌套接口吗？
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...