代码实现css鼠标经过元素下划线两边展开效果

零到壹度 原创: 2018-04-04 11:09:56 1573浏览

这篇文章主要介绍了代码实现css鼠标经过元素下划线两边展开效果,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

<!DOCTYPE html>

<html>
<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: 1px;    
    background: blue;    
    position: absolute;    
    top: 100%;    
    left: 50%;    
    transition: all .8s;
 }
    
    #underline:hover:after{ 
      left: 0%;   
      width: 100%;
 }
 </style>
 
 </head>
 
 <body>   
      <p id="underline"></p>
      
 </body>
 
 </html>

相关推荐：

利用伪元素和CSS3实现鼠标移入下划线向两边展开效果

css导航栏选中是有移动下划线的效果

水平导航栏+导航栏跟随+导航栏下划线滑动效果

以上就是代码实现css鼠标经过元素下划线两边展开效果的详细内容，更多请关注php中文网其它相关文章！

css 下划线，效果 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：微信小程序中css的使用技巧总结下一条：css页面滑动穿透的两种解决办法