zoukankan      html  css  js  c++  java
  • 鼠标移入下划线展开 CSS3伪类

    一 .鼠标移入下划线向两边展开

    <!DOCTYPE html>
     
    <html lang="en">
     
    <head>
     
        <meta charset="UTF-8">
     
        <title>鼠标移入下划线展开</title>
     
        <style type="text/css">
     
            #underline{
     
                 200px;
     
                height: 50px;
     
                background: #ddd;
     
                margin: 20px;
     
                position: relative;
     
            }
     
            #underline:after{
     
                content: "";
     
                 0;
     
                height: 5px;
     
                background: blue;
     
                position: absolute;
     
                top: 100%;
     
                left: 50%;
     
                transition: all .8s;
     
            }
     
            #underline:hover:after{
     
                left: 0%;
     
                 100%;
     
            }
     
        </style>
     
    </head>
     
    <body>
     
        <div id="underline"></div>
     
    </body>
     
    </html>
    

    二.鼠标移入下划线由左向右展开

    <!DOCTYPE html>
     
    <html lang="en">
     
    <head>
     
        <meta charset="UTF-8">
     
        <title>鼠标移入下划线展开</title>
     
        <style type="text/css">
     
            #underline{
     
                /*  200px; */
     
                height: 50px;
     
                background: #ddd;
     
                margin: 20px;
     
                position: relative;
     
            }
     
            #underline:after{
     
                content: "";
     
                 0;
     
                height: 5px;
     
                background: blue;
     
                position: absolute;
     
                top: 100%;
     
                left: 0%;
     
                transition: all .8s;
     
            }
     
            #underline:hover:after{
     
                left: 0%;
     
                 100%;
     
            }
     
        </style>
     
    </head>
     
    <body>
     
        <a href="#"><div id="underline">women</div></a>
     
    </body>
     
    </html>
    

      

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    (转载)linux 常用命令
    视图view
    Mysql增删改查
    mysql最基础命令
    mysql的基本操作
    (转载)RHEL7(RedHat 7)本地源的配置
    (转载)Linux之虚拟机 rehl7的ip
    js 基本
    java Servlet
    java Tttp协议和Tomcat
  • 原文地址:https://www.cnblogs.com/hudunyu/p/12889073.html
Copyright © 2011-2022 走看看