原帖地址   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. Cannot change version of project facet Dynamic Web Module to 2.4.

    解决办法,找到项目目录,将.settings  target  .classpath  .project 删除 重新引入项目 原因是 web.xml 文件里<web-app 里的与.settin ...

  2. 【小梅哥FPGA进阶教程】第十三章 四通道数字电压表

    十三.四通道数字电压表 本文由山东大学研友袁卓贡献,特此感谢 实验目的 设计一个四通道的数字电压表 实验平台 芯航线FPGA核心板.AD/DA模块 实验现象 实现一个四通道的数字电压表,其中可以用按键 ...

  3. Linux 下的多线程下载工具 Axel

    Axel 是 Linux 平台下的一款 HTTP/FTP 的高速下载工具,支持多线程以及断点续传,对于一些有速度限制的服务器上下载东西时,Axel 的速度就明显比 wget 要快一些 还有另一个基于 ...

  4. U盘安装Centos6.2

    原文地址:http://www.dedecms.com/knowledge/servers/linux-bsd/2012/0819/8452.html. 第一步:制作系统U盘(略). 第二步:设置BI ...

  5. (原创)用Microsoft Chart Controls（MSChart）实现曲线图，并支持拖动放大到秒

    Microsoft Chart Controls(简称MSChart)控件,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式. MSChart 在.NET 4.0自 ...

  6. C++11左值引用和右值引用

    转载:https://www.cnblogs.com/golaxy/p/9212897.html C++11的左值引用与右值引用总结 概念 1.&与&&  对于在C++中,大家 ...

  7. Git 极简入门教程学习笔记

    Git 极简入门教程  http://rogerdudler.github.io/git-guide/index.zh.html 测试用 https://github.com/xxx/BrnShop. ...

  8. Maximum file handles allowed by OS

    Linux can open 1024 files concurrently by each process by default: http://m.blog.csdn.net/blog/keepe ...

  9. 【ocp 052又加新题了】052新加的考试题及答案整理-第13题

    13.Which two are true about AWR snapshots? A) They are stored In the SYSAUX tablespace. B) They are ...

  10. zTree API中刷新树没效果

    想刷新树,但是根据API来的refresh无效 ---------------------------------------------------------------------------- ...