一、思路:

  将伪元素: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. Android中使用开源框架citypickerview实现省市区三级联动选择

    1.概述 记得之前做商城项目,需要在地址选择中实现省市区三级联动,方便用户快速的填写地址,当时使用的是一个叫做android-wheel 的开源控件,当时感觉非常好用,唯一麻烦的是需要自己整理并解析省 ...

  2. APP H5 混合自动化使用说明 [基于 Appium+Python 系列]

    背景 前几天接到H5开发人员那边的业务开发需求单,说想将H5接入到自动化系列中,特此记录分享一下. 环境前置准备 手机与电脑USB连接,开启USB调试模式,通过adb devices可查看到此设备. ...

  3. Pdf File Writer 中文应用(PDF文件编写器C#类库)

    该文由小居工作室(QQ:2482052910)    翻译并提供解答支持,原文地址:Pdf File Writer 中文应用(PDF文件编写器C#类库):http://www.cnblogs.com/ ...

  4. 【JS】JavaScript中的执行环境与作用域

    JavaScript中的执行环境定义了变量或函数有权访问的数据(每个函数都有自己的执行环境),全局执行环境是最外围的执行环境,在浏览器中,全局执行环境就是window对象,所以所有的全局变量和函数都是 ...

  5. StringBuffer与StringBuilder的区别,及实现原理

    区别 1.StringBuffer 与 StringBuilder 中的方法和功能完全是等价的, 2.只是StringBuffer 中的方法大都采用了 synchronized 关键字进行修饰,因此是 ...

  6. ionic的安装

    一.学习一样新的框架的步骤: 1.先找到人家的网站, 一个个点过来看看 2.我们前端的框架,分css与js 3.先学css 再学js 4.要学会复制黏贴代码, 实际演练代码的效果 二.ionic环境安 ...

  7. quartz任务时间调度入门使用

    Quartz 是 OpenSymphony 开源组织在任务调度领域的一个开源项目,完全基于 Java 实现. 作为一个优秀的开源调度框架,Quartz 具有以下特点: 强大的调度功能,例如支持丰富多样 ...

  8. 部署Cloudera Management for centos 7

    hadoop生态圈框架工具甚多,自己整合起来很是繁琐,特别是oozie以及hue结合来实现hive.mr.spark等定时依赖任务更是一步一个坑,为了减少踩坑,只好从apache hadoop,转向C ...

  9. Telnet 在win7 和 xp中的使用

    telnet 默认在开启之后 监听23端口.最近在尝试使用这个服务 虽然很多机器默认是不开启telnet这个服务的 但是 万一能够碰到 也是为了自己以后能够熟练起来咯. telnet有服务器跟客户端之 ...

  10. 免安装版Tomcat配置内存

    去安装目录下 找 bin 目录找到这个文件 catalina.bat在文件的头部加上 set JAVA_OPTS=-Xms512m -Xmx512m -Xss1024k具体大小自己调整