css3（十三）导航before练习

最新推荐文章于 2023-01-02 21:27:42 发布

不许偷苹果

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量251

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_38904347/article/details/82317136

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style>
     html,body{
        margin:0;
        padding:0px; 
      }
      body{
        width: 100%;
        height:100%;
        background-color: red;
      }
      .da{
        width:800px;
        height:50px;
        margin:200px auto;
        position:relative;
      }
      .zi{
        width:150px;
        height:30px;
        font-size:25px;
        color:#fff;
        float:left; 
        text-align:center;
      }
      .zi::before{
        content:"";
        display:inline-block;
        width:0px;
        height:1px;
        background:#fff;
        position:absolute;
        top:0;
      }
    .zi:hover::before{
        content:"";
        display:inline-block;
        width:90px;
        height:1px;
        background:#fff;
        transition:all 3s linear 0s;
      }
    </style>
</head>
<body>
    <div class="da">
        <div class="zi"><a href="">HOVER</a></div>
        <div class="zi"><a href="">HOVER</a></div>
        <div class="zi"><a href="">HOVER</a></div>
        <div class="zi"><a href="">HOVER</a></div>
        <div class="zi"><a href="">HOVER</a></div>
    </div>
</body>
</html>