绝对定位实现横线增长方向小技巧

喵_美

已于 2024-07-08 10:18:36 修改

阅读量166

点赞数 3

分类专栏： CSS效果文章标签： css html 前端

于 2024-07-07 01:24:24 首次发布

本文链接：https://blog.csdn.net/qq_34708564/article/details/140238702

版权

CSS效果专栏收录该内容

15 篇文章 0 订阅

订阅专栏

鼠标移入导航栏，被选中的链接画出下划线

使用绝对定位脱标后，用left和top设置横线增长方向。如果是left: 0;从左向右过渡长，如果是right: 0;就是从右往从长
效果如下：

绝对定位实现横线增长方向小技巧

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于运动方向的技巧</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      color: #222;
      text-decoration: none;
    }

    html,
    body {
      height: 100%;
    }

    .nav {
      padding-top: 70px;
      text-align: center;
    }

    .nav a {
      position: relative;
      display: inline-block;
      font-size: 14px;
    }

    .nav a:after {
      content: '';
      position: absolute;
      bottom: 0;
      /* 先脱标，后设置left: 0;从左向右过渡长，如果是right: 0;就是从右往从长 */
      left: 0;
      width: 0;
      height: 1px;
      background-color: orange;
      transition: .3s;
    }

    .nav a:hover:after {
      width: 100%;
    }

    .line {
      /* 如果没有脱标默认从左向右长 */
      width: 0;
      height: 3px;
      background-color: red;
      transition: 1s;
    }

    body:hover .line{
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="nav">
    <a href="#">首页</a>
    <a href="#">新闻资讯</a>
    <a href="#">体育资讯</a>
    <a href="#">今日看点</a>
    <a href="#">更多消息</a>
  </div>
  <div class="line"></div>
</body>
</html>