效果：

代码：

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. idea中HTML格式化时标签缩进问题

    在IntelliJ Idea中HTML格式化时,默认<head><body>以及<body>下的以及标签都不会缩进. 解决方法:editor->code st ...

  2. 压缩过的jQuery

    /*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */ !function(e,t){ ...

  3. 洛谷P1352 没有上司的舞会 [2017年5月计划 清北学堂51精英班Day3]

    P1352 没有上司的舞会 题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子 结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职 ...

  4. 【产品经理】产品经理不懂API接口是什么，怎么和程序员做朋友？

    接口不是技术经理来写吗?没接过它,一脸不清楚地节奏 开放即共享,是互联网的一个重要属性和精神.它是一种服务模式,一个特殊的产品,目前较大规模的互联网企业都有自己的开放平台. 如果把自己局限为一个功能产 ...

  5. 快速排序的一种实现（Mark Allen 数据结构与算法 c语言版）

    之前关于快速排序一直比较模糊,网上有几种常见写法: 方法一: void quickSort(int s[], int l, int r) { if (l< r) { int i = l, j = ...

  6. Session学习小结

    前言: 1.我们在学习一项技术的时候,首先应该是什么时候会用到这项技术.这次学习session也是如此,一般的web项目中都有用户的存在,有用户那么就有了用户的管理,而用户往往是存在于session中 ...

  7. pillow模块

    pillow模块 用于操作图片的模块 安装 pip install pillow 生成验证码 from PIL import Image,ImageDraw,ImageFont from io imp ...

  8. Python高级核心技术97讲 系列教程

    Python高级核心技术97讲 系列教程 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的 ...

  9. vue2.0 兼容ie9及其以上

    vue官方的意思是vue项目可以在ie8以上的ie版本中运行 但其实使用vue-cli构建的项目也还是不能在ie8[ie9,ie10,ie11]以上的版本中运行 下面就来讲vue如何在ie8以上ie版 ...

  10. [java]反射1 2017-06-25 21:50 79人阅读 评论(10) 收藏

    很多东西的实现基础,都是反射,spring的AOP,动态代理等等,下面咱们来学习一下Java的反射 什么是反射? JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于 ...