1、前几天看到Hexo的next主题标题hover效果很炫，自己尝试写了一个，另一个是next的实现，照例先上图 　　 2、实现小黑科技 关键在于没有hover的时候定义width为0，这样可以实现宽度从0到100%的变化。 left为50%，目的是为了动画 ...

...

先来看一下效果： 1、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出 2、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长 实现思路 1、导航是由ul+li组成的，在这里显然li 的宽度是不固定 ...

但在我在CSS中新加了TEXT-DECORATION: underline; 后发现下划线离文本太近了，很难看。 代码一： 代码二： 代码三： ...

样式之文字下划线 第一 text-decoration: underline; 缺点是不好修改颜色 不要修改下划线的位置，优点就是一行代码解决 可以使用line-height: 20px; 也能调整位置; 第二种更全面 使用span标签而且不会变形 ...

在做页面的时候发现页面导航栏有一个很棒的效果。具体的效果就是，当鼠标移到一个导航栏时，导航栏下方会缓慢出现一条线。 当用ui内联的方式实现普通的导航后，在html中的li添加一个class用来控制下划线的移动。 html部分： <div class="top"> ...

酷炫的动画效果往往更能吸引眼球，下面我将分享纯CSS中，hover的时候出现下划线动态飞入的技巧。 1.下划线从左侧飞入： div::before{ content:""; width:50px; position:absolute;　　display ...

css a标签去除下划线 a{text-decoration:none; } ...