一、思路：

　　将伪元素: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. 关于Dapper.NET的相关论述

    年少时,为何不为自己的梦想去拼搏一次呢?纵使头破血流,也不悔有那年少轻狂.感慨很多,最近事情也很多,博客也很少更新了,毕竟每个人都需要为自己的生活去努力. 最近在一个群里遇到一个人说的话,在这里不再赘 ...

  2. 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-3

    来个目录吧: 第一章 第二章 第三章 暂时就这么多.后面路线更新吧 创建.查询.更新.删除 这章主要讲解使用EF完成 增删改查的功能. 自定义"详情信息"页面 我们通过基架生成的代 ...

  3. [LeetCode]Integer Break(Dp或胡搞或推公式)

    343. Integer Break Given a positive integer n, break it into the sum of at least two positive intege ...

  4. AlloyFinger.js 源码 学习笔记及原理说明

    此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate  touchStart  multipointStart   ...

  5. 深入Redux架构

    关于redux 之前写了一篇通过一个demo了解Redux,但对于redux的核心方法没有进行深入剖析,在此重新总结学习,完整的代码看这里.(参考了React 技术栈系列教程) 什么情况需要用redu ...

  6. Struts2中Action配置的三种方式

    <!-- 方案一:一个action对应一个方法; --> <action name="add" class="com.gxxy.struts.kp03_ ...

  7. CCF2013123最大的矩形（C语言版）

    问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...

  8. C++ Primer 5 CH4 表达式

    4.1 基础 函数调用也是一种特殊的运算符,它对运算对象的数量没有限制. C++ 的表达式要么是左值,要么是右值.左值可以位于赋值语句的左边,右值则不可以. 当一个对象被用作右值的时候,用的是对象的值 ...

  9. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  10. C#实现GridView导出Excel

    using System.Data;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System. ...