原帖地址   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. 设计模式15---Android 观察者模式（转载自：“http://blog.csdn.net/fangchongbory/article/details/7774044”）

    /* * 观察者模式 *      定义对象间的一种一个(Subject)对多(Observer)的依赖关系,当一个对象的状态发送改变时,所以依赖于它的 * 对象都得到通知并被自动更新 * * 当然, ...

  2. 洛谷 4051 [JSOI2007]字符加密（后缀数组）

    题目描述 喜欢钻研问题的JS 同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法:把需要加密的信息排成一圈,显然,它们有很多种不同的读法. 例如‘JSOI07’,可以读作 ...

  3. 17、Semantic-UI之分页插件

      在很多的前端开发框架中都会有提供分页插件,但是分页插件的使用如果手动编写还是比较复杂的.使用Semantic-UI中的分页插件更加简单方便.分页插件的使用必须要和后台结合. 示例:定义分页插件 & ...

  4. 20145233《网络对抗》Exp8 Web基础

    20145233<网络对抗>Exp8 Web基础 实验问题思考 什么是表单? 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框.隐藏域 ...

  5. Java中的多态方法

    public class Main { public void test(Object o) { System.out.println("Object"); } public vo ...

  6. IO--磁盘理论

    磁盘从圆心由内向外被分成多个磁道,而每个磁道会被划分成多个连续的扇区 扇区是磁盘寻址的最小单位,而实际上分配空间最小的单位是簇(cluster),因此导致文件大小和实际占用空间大小不一样 磁盘读写数据 ...

  7. 【git】常用命令

    // 下载Git项目git clone url // 显示当前git配置git config --list // 设置用户信息git config --global user.name "& ...

  8. c# 用户输入一个字符串，求字符串的长度

    C#  用户输入一个字符串,求字符串的长度使用字符串的length: class Program { static void Main(string[] args) { Console.WriteLi ...

  9. ng 发生 Error: ELOOP: too many symbolic links encountered...

    ng g component components/home 发生如下提示: 由于使用 cnpm install 安装 node_modules 导致这样. 解决办法: 删除 node_modules ...

  10. 【selenium专题】元素定位之多层框架和窗口

    本节知识点 多层框架或窗口切换样式:WebDrvier.switchto().TargetLocator Interface WebDriver.TargetLocator下所有可切换对象 参考API ...