一、思路：

　　将伪元素: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实现鼠标移入下划线向两边展开效果

    原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...

  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. 利用css实现鼠标经过元素，下划线由中间向两边展开

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. 配置Server Side TAF

    实验环境:Oracle 11.2.0.4 RAC 参考MOS文档: How To Configure Server Side Transparent Application Failover (文档 ...

  2. Servlet中编码在过滤器中的使用

    1.先配置web.xml ->配置过滤器 // filter-class 为写的过滤器类 实现 Filter 接口 <filter> <filter-name>Encod ...

  3. canvas作图

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. Team Foundation Server 基本功能

    Team Foundation Server(以下简称TFS)作为Microsoft发布的一个主要用于团队源代码管理工具,以敏捷开发作为其最大的特点而占领部分市场.该文主要介绍 TFS 在 Visua ...

  5. 对象作为 map 的 key 时，需要重写 equals 方法和 hashCode 方法

    对象作为 map 的 key 时,需要重写 hashCode 和 equals方法 如果没有重写 hashCode 方法,那么下面的代码示例会输出 null 我们首先定义一个对象:BmapPoint, ...

  6. yii2.0下拉列表的使用

    第一种方法:ActiveForm 类的 dropDownList 方法(优点,默认使用yii的样式) 1.在控制器的方法里面 ,我们需要拿到数据,一定是 findAll() 或者是 all() 方法的 ...

  7. Android getAttributeIntValue()详解-霞辉

    经常使用getAttributeIntValue()方法,但是大多使用的形式是attrs.getAttributeFloatValue(null, "xxx", 0);只是在中间传 ...

  8. C#生成漂亮验证码完整代码类

    using System;using System.Web;using System.Drawing;using System.Security.Cryptography; namespace Dot ...

  9. python3的urllib2报错问题解决方法

    python urlib2 兼容问题 在python3中,将urllib和urllib2合并了,所以在使用urllib2的地方改成urllib.request即可.示例如下 import urllib ...

  10. 关于微信小程序图片失真的解决方案

    今天来说一说 关于微信小程序的图片失真问题的解决,微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域:如下 但是宽高设置固定了会导致有些图片和规定显示图片大小的比例不一 ...