一、思路:
将伪元素: before 和: after 定位到元素底部中间,设置宽度从 0 变成 100% 达到目的。
二、实现:
1、首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设置相对定位。
2、设置: before 和: after 两个伪元素,将其设置为背景色为蓝色(也就是下划线的颜色),利用绝对定位将两个元素固定到 #underline 底部中间位置。
- css样式#underline: before,
- #underline: after {
- content: "";
- /*单引号双引号都可以,但必须是英文*/
- width: 0;
- height: 3px;
- /*下划线高度*/
- background: blue;
- /*下划线颜色*/
- position: absolute;
- top: 100 % ;
- left: 50 % ;
- transition: all.8s;
- /*css动画效果,0.8秒完成*/
- }
3、设置鼠标移入效果。
- css样式
- #underline:hover:before{
- left:0%;
- width:50%;
- }
- #underline:hover:after{
- left: 50%; /*这句多余,主要是为了对照*/
- width: 500%;
- }
/**/
三:优化
1、虽然目的达到了,但是用了两个伪元素,一个向左延伸 50%,一个向右延伸 50%,只用一个延伸至 100% 能否达到目的呢?
- css代码
- #underline:after{
- content: "";
- width: 0;
- height: 5px;
- background: blue;
- position: absolute;
- top: 100%;
- left: 50%;
- transition: all .8s;
- }
- #underline:hover:after{
- left: 0%;
- width: 100%;
- }
2、只定义: after 伪元素,将其从距离左边 50% 宽度为 0 的同时改变成距离左边 0% 宽度为 100% 就可以实现,从而达到了精简代码的目的,而且还多余出了: before。
四、完整代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>鼠标移入下划线展开</title>
- <style type="text/css">
- #underline{
- width: 200px;
- height: 50px;
- background: #ddd;
- margin: 20px;
- position: relative;
- }
- #underline:after{
- content: "";
- width: 0;
- height: 5px;
- background: blue;
- position: absolute;
- top: 100%;
- left: 50%;
- transition: all .8s;
- }
- #underline:hover:after{
- left: 0%;
- width: 100%;
- }
- </style>
- </head>
- <body>
- <div id="underline"></div>
- </body>
- </html>
来源: http://www.cnblogs.com/yangjunfei/p/6739683.html