如何使用 CSS 格式化导航栏的下划线答案

【问题标题】：How to format an underline for a navigation bar using CSS如何使用 CSS 格式化导航栏的下划线
【发布时间】：2020-05-13 22:29:54
【问题描述】：

当我将鼠标悬停在单词上时，我想出了如何在导航栏的一部分下添加下划线。当我在该页面上时，我正在尝试以相同的格式制作它，以便下划线留在那里。我想不通。希望得到一些帮助。谢谢:)

*{
    margin:0;
    padding:0;
    border:0;
}


.topnav {
    background-color: purple;
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  }

  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Change
  </title>
</head>

<body>
  <div class="topnav">
    <a class="active" href="index.html">Home</a>
    <a href="#news">DontUse</a>
    <a href="#contact">DontUse</a>
    <a href="about.html">About</a>
  </div>
  <p>
    This is the home page
  </p>
</body>

</html>

【问题讨论】：

标签： html css format underline

【解决方案1】：

给你，使用 jquery。还做了一个新的活动菜单类.topnav a.active-menu:before

$("a").click(function(){
   $("a.active-menu").removeClass("active-menu");
   $(this).addClass("active-menu");
});

*{
    margin:0;
    padding:0;
    border:0;
}


.topnav {
    background-color: purple;
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  }

  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Change
  </title>
</head>

<body>
  <div class="topnav" id="topnav">
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="#news">DontUse</a>
    <a class="link" href="#contact">DontUse</a>
    <a class="link" href="about.html">About</a>
  </div>
  <p>
    This is the home page
  </p>
</body>

</html>

【讨论】：

你能检查一下为什么这不起作用。我在这里更新了它：jsfiddle.net/rfradkin/h4wpguc9/2
@rf19 因为您没有在我的解决方案使用的框架和扩展 jQuery 库中选择。点击 JavaScript + No-Library（纯 JS），在 Frameworks & Extensions 中选择最新的 jQuery。如果您有本地或托管文件，则还需要在其中添加 jQuery 才能使其正常工作。你可以谷歌如何做到这一点。
@rf19 这也可以用纯 JS 代码编写，你不想使用 librerys，但代码更多，我现在没有时间。如果你需要它给我留言，我明天会找到一些。