<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            ul {

                display: flex;

                position: absolute;

                width: 800px;

                top: 50%;

                left: 50%;

                transform: translate(-50%, -50%);

            }

            li {

                position: relative;

                padding: 20px;

                font-size: 24px;

                color: #000;

                line-height: 1;

                transition: 0.2s all linear;

                cursor: pointer;

            }

            li::before {

                content: "";

                position: absolute;

                top: 0;

                left: 100%;

                width: 0;

                height: 100%;

                border-bottom: 2px solid #000;

                transition: 0.2s all linear;

            }

            li:hover::before {

                width: 100%;

                top: 0;

                left: 0;

                transition-delay: 0.1s;

                border-bottom-color: #000;

                z-index: -1;

            }

            li:active {

                background: #000;

                color: #fff;

            }

        </style>

    </head>

    <body>

        <ul>

          <li>不可思议的CSS</li>

          <li>导航栏</li>

          <li>光标小下划线跟随</li>

          <li>PURE CSS</li>

          <li>Nav Underline</li>

        </ul>

    </body>

</html>

效果图

css奇淫巧计的更多相关文章

  1. CSS布局奇淫巧计之-强大的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  2. .net 开发的奇淫巧计

    随机数 Random random = new Random(( int)DateTime .Now.Ticks & 0x0000FFFF); 如何让ASP.NET Web API显示完整的错 ...

  3. CSS奇淫技巧

    对于图标,使用fontsize设置大小,而非宽高! 高度不够的时候使用min-height 保持宽高比 四个方向的padding都是相对于 本盒子的宽度来的 常用于视频和图片的展示,比如轮播图. 所以 ...

  4. 记录一些css奇淫技巧

    文本两端对齐 文字在固定宽度内两端对齐 text-align: justify; text-align-last: justify; 滤镜filter 元素(经常用作图片)置灰效果,类似disable ...

  5. CSS布局奇淫技巧之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  6. CSS布局奇淫技巧之--各种居中<转>

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  7. Zepto源码分析（二）奇淫技巧总结

    Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...

  8. [asp.net mvc 奇淫巧技] 01 - 封装上下文 - 在View中获取自定义的上下文

    我们在asp.net 开发中已经封装了最强大的HttpContext,我们可以在HttpContext中可以获取到几乎任何想获取的东西,也可以在HttpContext写入需要返回客户端的信息.但是这些 ...

  9. 优化DP的奇淫技巧

    DP是搞OI不可不学的算法.一些丧心病狂的出题人不满足于裸的DP,一定要加上优化才能A掉. 故下面记录一些优化DP的奇淫技巧. OJ 1326 裸的状态方程很好推. f[i]=max(f[j]+sum ...

随机推荐

  1. *CTF 2019 quicksort、babyshell、upxofcpp

    这次参加比赛总共出了三道,有两道队友都先交了,还是tcl,heap_master卡了差不多一天没解决....还是记录一下出的题目吧 quicksort 题目大体流程就是输入要输入的数字数量,然后输入数 ...

  2. 修改或添加HTTP请求头

    1.Cookie的修改 (一)cookie长什么样 cookie是一个个键值对(“键=值”的形式)加上分号空格隔开组合而成, 形如: "name1=value1; name2=value2; ...

  3. HDU 2243考研路茫茫——单词情结 （AC自动机+矩阵快速幂）

    背单词,始终是复习英语的重要环节.在荒废了3年大学生涯后,Lele也终于要开始背单词了. 一天,Lele在某本单词书上看到了一个根据词根来背单词的方法.比如"ab",放在单词前一般 ...

  4. 启动两个tomcat服务，以及使用nginx代理实现访问

    1.shoudowm.bat\startup.bat\catalina.bat, 将CATALINA_HOME修改为CATALINA_HOME_2 2.server.xml <Server po ...

  5. Spark环境搭建（七）-----------spark的Local和standalone模式启动

    spark的启动方式有两种,一种单机模式(Local),另一种是多机器的集群模式(Standalone) Standalone 搭建: 准备:hadoop001,hadoop002两台安装spark的 ...

  6. BZOJ5412 : circle

    若仅保留这$k$个点仍然有环,那么显然无解. 否则设$A$表示这$k$个点的集合,$B$表示剩下的点的集合,因为是竞赛图,每个集合内部的拓扑关系是一条链,方便起见将所有点按照在所在集合的链上的位置进行 ...

  7. lua 文件编译相关工具

    -- 编译一个代码文件 -- loadfile (lua_State *L, const char *filename); -- 将一个文件加载为lua代码块,仅编译不执行,返回值为编译后的 -- 代 ...

  8. 编程菜鸟的日记-Linux无处不在

    原文来自:http://www.linuxfederation.com/linux-everywhere Linux无处不在 “Linux无处不在.从空间站到微波炉到有Linux.”你可能听说很多以及 ...

  9. Go smtp发送邮件，带附件

    package main import ( "net/smtp" "bytes" "time" "io/ioutil" ...

  10. iNode客户端“未收到服务器回应，即将强行下线，请检查终端能否正常访问网络或者与管理员联系”问题与解决方式

    最后在华工校园网用户故障自助手册中找到答案,参考链接: https://max.book118.com/html/2015/0115/11423952.shtm https://wenku.baidu ...