原文：利用伪元素和css3实现鼠标移入下划线向两边展开效果
一 思路： 将伪元素:before和:after定位到元素底部中间，设置宽度从 变成 达到目的。 二 实现： 首先定义一个块状元素 行内元素没有宽高 并修改样式为一个背景色为浅灰色的矩形，设置相对定位。 html代码 lt div id underline gt lt div gt css样式 underline width: px height: px background: ddd margi ...
2017-04-20 16:57 0 3443 推荐指数：
相关推荐
.selectStyle { color: #EF420E; font-size: 35rpx; font-weight: bold; position: relative; ...
先来看一下效果： 1、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出 2、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长 实现思路 1、导航是由ul+li组成的，在这里显然li 的宽度是不固定 ...
...
在做页面的时候发现页面导航栏有一个很棒的效果。具体的效果就是，当鼠标移到一个导航栏时，导航栏下方会缓慢出现一条线。 当用ui内联的方式实现普通的导航后，在html中的li添加一个class用来控制下划线的移动。 html部分： <div class="top"> ...
...
...