效果：

代码：

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. springMVC原理解析

    1:SpringMVC运行原理 2:工作流程 (1)客户端(浏览器)发送请求,直接请求到DispatcherServlet. (2)DispatcherServlet根据请求信息调用HandlerMa ...

  2. openpyxl 模块的使用

    参考博客:https://www.cnblogs.com/anpengapple/p/6399304.html?utm_source=itdadao&utm_medium=referral 在 ...

  3. android中的http框架，使其更加简单易用

    Afinal 是一个android的sqlite orm 和 ioc 框架. Afinal 是一个android的sqlite orm 和 ioc 框架.同时封装了android中的http框架,使其 ...

  4. vue 数组遍历方法forEach和map的原理解析和实际应用

    一.前言 forEach和map是数组的两个方法,作用都是遍历数组.在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例. 二.代码 1. 相同点 都是数组的方法 都用来遍历数组 ...

  5. IUAP--单点登录

    登录组件: 提供统一的登录组件 身份.证明验证身份 支持多种身份标识,用户名.邮箱.手机号 支持多个域,从与得到用户响应的角色,权限进行验证用户时候能进行操作. 支持会话管理和安全管理 支持多种验证策 ...

  6. [J2EE规范]JDBC简单例子 标签： 数据库j2eejdbcjava 2017-06-29 10:55 353人阅读 评论(12)

    JDBC是什么? JDBC是java数据库连接(Java Database Connectivity),它是用于java编程语言和数据库之间的数据库无关连接的标准Java API,就是说,JDBC是用 ...

  7. window10下载安装jieba

    下载安装jieba的过程如下: 1 下载jieba 2 将其解压到E:\python2,如图所示: 3 在桌面左下角搜索框中输入"运行",之后输入"cmd".再 ...

  8. QT获取主机名称

    //获取主机名 QString localHost = QHostInfo::localHostName();

  9. Directx11教程(55) 建立球形和锥形物体

    原文:Directx11教程(55) 建立球形和锥形物体 本教程中,我们新建2个model class,SphereModelClass以及CylinderModelClass,分别用来表示球形和锥形 ...

  10. Ubuntu 16.04下OLSR协议安装教程

    OLSR是根据MANET的要求,在传统的LS(Link state)协议的基础上优化的. OLSR中的关键概念是多点转播(MPRs),MPRs是在广播洪泛的过程中挑选的转发广播的节点.传统的链路状态协 ...