[乐意黎转载]CSS滑动下划线

搜集翻译了一些下划线的动态效果，感觉可能什么时候会用，这里贴一下~请使用现代浏览器查看效果。

主要就是使用了CSS的:after伪类，再加上一些transition动画效果，设置设置宽度高度，左右距离好像就完事儿了……

下划线从上到下出现

鼠标放上去，你会发现下划线“生长”出来了，不过页面所有的内容也往下走了3像素，这样视觉效果不是很好，你可以将它设置一下绝对定位（就好像下面的那个例子）或者用一个固定高度的容器包裹一下它。

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.sliding-u-t-b {      display : inline-block ; } .sliding-u-t-b:after {      content : '' ;      display : block ;      height : 0 ;      width : 100% ;      background : transparent ;      transition : height .5s ease, background-color .5s ease ; } .sliding-u-t-b:hover:after {      height : 3px ;      background : blue ; }

下划线从下到上出现

这个就是使用绝对定位的效果。

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.sliding-u-b-t { display : inline-block ; position : relative ; } .sliding-u-b-t:after { content : '' ; position : absolute ; bottom : 0 ; left : 0 ; height : 0px ; width : 100% ; background : transparent ; -webkit-transition : all ease 0.5s ; -moz-transition : all ease 0.5s ; transition : all ease 0.5s ; } .sliding-u-b-t:hover:after { height : 3px ; background : blue ; }

下划线从左到右出现

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.sliding-u-l-r { display : inline-block ; } .sliding-u-l-r:after { content : '' ; display : block ; height : 3px ; width : 0 ; background : transparent ; transition : width .5s ease, background-color .5s ease ; } .sliding-u-l-r:hover:after { width : 100% ; background : blue ; }

下划线从右到左出现

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.sliding-u-r-l {      display : inline-block ;      position : relative ;      padding-bottom : 3px ; } .sliding-u-r-l:after {      content : '' ;      display : block ;      position : absolute ;      right : 0 ;      bottom : 0 ;      height : 3px ;      width : 0 ;      background : transparent ;      transition : width .5s ease, background-color .5s ease ; } .sliding-u-r-l:hover:after {      width : 100% ;      background : blue ; }

下划线两边伸展

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

.sliding-middle-out { display : inline-block ; position : relative ; padding-bottom : 3px ; } .sliding-middle-out:after { content : '' ; display : block ; margin : auto ; height : 3px ; width : 0px ; background : transparent ; transition : width .5s ease, background-color .5s ease ; } .sliding-middle-out:hover:after { width : 100% ; background : blue ; } .sliding-middle-out { display : inline-block ; position : relative ; padding-bottom : 3px ; } .sliding-middle-out:after { content : '' ; display : block ; margin : auto ; height : 3px ; width : 0px ; background : transparent ; transition : width .5s ease, background-color .5s ease ; } .sliding-middle-out:hover:after { width : 100% ; background : blue ; }

下划线滑进滑出

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

.sliding-u-l-r-l {      display : inline-block ;      position : relative ;      padding-bottom : 3px ; } .sliding-u-l-r-l:before {      content : '' ;      display : block ;      position : absolute ;      left : 0 ;      bottom : 0 ;      height : 3px ;      width : 0 ;      transition : width 0s ease, background .5s ease ; } .sliding-u-l-r-l:after {      content : '' ;      display : block ;      position : absolute ;      right : 0 ;      bottom : 0 ;      height : 3px ;      width : 0 ;      background : blue ;      transition : width .5s ease ; } .sliding-u-l-r-l:hover:before {      width : 100% ;      background : blue ;      transition : width .5s ease ; } .sliding-u-l-r-l:hover:after {      width : 100% ;      background : transparent ;      transition : all 0s ease ; }

下划线反向滑进滑出

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

.sliding-u-l-r-l-inverse {      display : inline-block ;      position : relative ;      padding-bottom : 3px ; } .sliding-u-l-r-l-inverse:before {      content : '' ;      display : block ;      position : absolute ;      left : 0 ;      bottom : 0 ;      height : 3px ;      width : 100% ;      transition : width 0s ease ; } .sliding-u-l-r-l-inverse:after {      content : '' ;      display : block ;      position : absolute ;      right : 0 ;      bottom : 0 ;      height : 3px ;      width : 100% ;      background : blue ;      transition : width .5s ease ; } .sliding-u-l-r-l-inverse:hover:before {      width : 0% ;      background : blue ;      transition : width .5s ease ; } .sliding-u-l-r-l-inverse:hover:after {      width : 0% ;      background : transparent ;      transition : width 0s ease ; }

原文地址: http://eyehere.net/2015/css-sliding-underline/