效果：

代码：

a{padding: 10px 10px; position: relative;}

a:before{content: ''; width: 100%; height: 3px; background-color: #f00; transform: scaleX(0); -webkit-transform: scaleX(0); transition: all 0.2s; -webkit-transition: all 0.2s; position: absolute;

    bottom: 0px; left: 0px;}

a:hover{color: #0000d0;}

a:hover:before{transform: scaleX(1); -webkit-transform: scaleX(1);}

实现菜单底部线条沿着 X 轴的值缩放转换scaleX的更多相关文章

  1. navigationController 去掉背景图片、去掉底部线条

    //去掉背景图片 [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMe ...

  2. 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值

    随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...

  3. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  4. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  5. 【ZedGraph】右键菜单和鼠标滚轴的移动缩放等功能的启用和禁用 (转)

    通过[ZedGraph]控件属性修改: 1.禁用右键菜单: IsShowContextMenu = false; 2.禁用鼠标滚轴移动: IsEnableHPan = false; //禁止横向移动; ...

  6. 让 cell 显示底部线条时,总是有几个线条被隐藏.

    一,经历 1> 感觉像是重用的问题,但从代码的分析中找不出任何问题. 2> 感觉像是我 在创建怎样的 cell 的代码 被 layoutsubviews 方法覆盖了一样.于是先在创建怎样的 ...

  7. 18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航

    ProductContent.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; ...

  8. 改变navigationbar的底部线条颜色

    [[UINavigationBar appearance] setBackgroundImage:[UIImage new]forBarMetrics:UIBarMetricsDefault]; CG ...

  9. 底部线条css样式

    1.首先固定宽高 (将文字移至左边,例如 “姓名:”) .line{ width:100%; height:40px; float:left; border-bottom:1px solid #ccc ...

随机推荐

  1. GIT → 02：Git和Svn比较

    2.1 SVN介绍 2.1.1 SVN简介 SVN 属于集中式版本管理控制系统,服务器中保存了所有文件的不同版本,而协同工作人员通过连接svn服务器,提取出最新的文件,获取提交更新.Subversio ...

  2. JAVA Sftp 上传下载

    SftpUtils package xxx;import com.jcraft.jsch.Channel; import com.jcraft.jsch.ChannelSftp; import com ...

  3. win10 系统同步时间出错

    设置->时间和语言->区域和语言->其他日期,区域和时间设置->设置时间和日期->Internet时间->更改设置 应该会有两个服务器,分别更新下时间,哪个正确就用 ...

  4. 让Drewtech的J2534 ToolBox 软件支持任何J2534的设备

    更改windows注册表中的FunctionLibrary和ConfigApplication,将DLL和exe路径替换原来的,其他不要动. 或者 create second key in regis ...

  5. Spring 社区的首个国产开源项目顺利毕业

    相信大家对上周的 <来自 Spring Cloud 官方的消息,Spring Cloud Alibaba 即将毕业>文章记忆犹新.本周,Spring Cloud Alibaba 正式毕业, ...

  6. Ubuntu的网络共享

    实际场景 公司项目中遇到一个场景:Ubuntu的主机上装了个4G卡(USB模式),需要将这个4G网共享给一个AP,使得所有连接AP的移动设备都可以通过4G上外网 方法很简单: 1. 将4G网口之外的另 ...

  7. jeecg Access restriction 问题解决

    最近导入新项目,导入所有用到的jar包,发现其中一个引用报错 import com.sun.istack.internal.Nullable; 具体信息如下: Access restriction: ...

  8. Spring Boot → 08：嵌入式Servlet容器自定义

    Spring Boot → 08:嵌入式Servlet容器自定义

  9. 重磅发布：阿里开源 Open JDK 长期支持版本 Alibaba Dragonwell

    3 月 21 日北京阿里云峰会,阿里巴巴正式宣布对外开源 OpenJDK 长期支持版本 Alibaba Dragonwell.作为 Java 全球管理组织 Java Community Process ...

  10. JQuery-- 实例:小米左右切图,淡入淡出,自动，小圆点触发轮播图

    示意图: demo <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...