原帖地址   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. Java锁---偏向锁、轻量级锁、自旋锁、重量级锁

    之前做过一个测试,反复执行过多次,发现结果是一样的: 1. 单线程下synchronized效率最高(当时感觉它的效率应该是最差才对): 2. AtomicInteger效率最不稳定,不同并发情况下表 ...

  2. Python 数据分析—第十章 日期处理

    日期时间数据类型及工具 from datetime import datetime now = datetime.now() print(now.year,now.month,now.day) #以毫 ...

  3. jQUery 常用实例

    1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“se ...

  4. 织梦CMS让channelartlist标签支持currentstyle【转】

    打开include\taglib\channelartlist.lib.php找到 $pv->Fields['typeurl'] = GetOneTypeUrlA($typeids[$i]); ...

  5. AI_图像识别

    http://ai.baidu.com/forum/topic/show/595938 经测试识别率相当高,车辆信息识别 文中的import cv2不是python3自带库,需要安装pip3 inst ...

  6. Entity Framework 高性能 泛型缓存+动态Lambda

    前言:自学CSharp挺长时间的了,这是我第一编博客,跟大家分享一下.如有不足地方请多多包涵,也欢迎大家提出更好的意见,下面开始进入正题. 一.泛型缓存 1.概念:1.泛型(泛型也是一种推断类型,从而 ...

  7. LightOJ 1094 - Farthest Nodes in a Tree

    http://lightoj.com/volume_showproblem.php?problem=1094 树的直径是指树的最长简单路. 求法: 两遍BFS :先任选一个起点BFS找到最长路的终点, ...

  8. C++ 莫队算法（转）

    胡小兔的良心莫队教程:莫队.带修改莫队.树上莫队   在开始学习莫队之前,照例先甩一道例题:BZOJ 1878 HH的项链. 题意:求区间内数的个数,相同的数只算一次. 在我关于这道题的上一篇题解中, ...

  9. 【08】循序渐进学 docker：docker compose

    写在前面的话 在之前的操作中,即使是单个容器每次都需要敲很长的命令,当需要多个容器组合着用的时候更加麻烦,此时我们急需找到一种一次配置,随便运行的方法. 这就是这一节重点,单机容器编排工具:docke ...

  10. 【Android 多媒体应用】使用MediaCodec解码使用AudioTrack播放音频数据

    1.MainActivity.java import android.app.Activity; import android.os.Bundle; import android.os.Environ ...