原帖地址   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实现鼠标移入下划线向两边展开效果的更多相关文章

  1. 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...

  2. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  3. 利用伪元素before实现自定义checkbox样式

     原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...

  4. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  5. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  6. 利用伪元素:after清除浮动

    一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...

  7. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  8. CSS练习-导航栏斜线分隔-利用伪元素

    开始切第一张图了,第一个遇到的问题是顶部导航栏这里,用斜线分割.想到的思路是用伪类:before或者:after实现 先写html结构. <!-- 导航栏begin --> <div ...

  9. 理解伪元素 :Before 和 :After

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...

随机推荐

  1. linux 创建数据库

    mysql -uroot -pxxxxxx 1. 修改服务器的字符集 打开/etc/mysql/my.cnf,在[mysqld]后添加character-set-server=utf8 2. 查看my ...

  2. vs下C# WinForm 解决方案里面生成的文件都是什么作用?干什么的?

    Properties文件夹 定义你程序集的属性 项目属性文件夹 一般只有一个 AssemblyInfo.cs 类文件,用于保存程序集的信息,如名称,版本等,这些信息一般与项目属性面板中的数据对应,不需 ...

  3. Mysql的备份,权限与日志

    1>Mysql的数据备份    mysqldump 工具 --single-transaction 该选项导出数据之前提交一个BEGIN SQL语句,不会阻塞任何应该程序而且能保证导出数据时的一 ...

  4. CentOS 7.2安装gitlab-ce

    国内网络原因,gitlab-ce安装包可以在清华大学开源网站镜像站下载:https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/ [root@gitlab ~]# ...

  5. 网站页面多出&65279出现空白行的原因及解决方法

    模板文件生成html文件之后会在body开头处加入一个可见的控制符&#65279,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. 这种编码方式一般会在windows操 ...

  6. 使用Amazon Simple Queue Service(SQS) 实现简单的消息服务

    一  引言 亚马逊Amazon作为云计算的领跑者推出了很多云服务,最近因为项目的原因,需要用到SQS服务,因此简要地写下这篇随笔,一来方便以后查阅,二来方便共享一些简单的操作. SQS即可以理解为一个 ...

  7. Oracle数据表转换为Shapefile(一)

    严格来说,文章标题中的“转换”并不完全合适.本文的主要内容是基于Oracle数据表的数据来生产出Shapefile文件.进行该工作的一个前提条件是:Oracle数据表中包含坐标数值字段,一般来说就是x ...

  8. simrank

    simrank 背景 度量相似度是许多应用的关键问题.传统方法与问题的领域相关,如文本匹配.计算交集.simrank则利用关联关系度量相似性,即"两个节点的相似性和各自邻域节点的相似度有关& ...

  9. TSQL--SORT MERGE JOIN

    算法:对两表排序,然后对两表依次扫描,找到符合条件的结果集 sort(T1); seort(T2); int k=0;--for T1 index int m=0;--for T2 index whi ...

  10. BlangenOA项目展示(附源码)

    1. 登录界面 1.1表单校验 1.2信息有误 1.3正在登录   2.桌面 3.用户管理 3.1添加 3.2删除 3.3编辑 3.4设置用户角色 3.5设置用户权限 4.角色管理 5.权限管理(菜单 ...