如何在导航栏中悬停时设置顶行

Question

我怎样才能在悬停时显示这个顶行

我在导航栏中使用 flexbox（至少尝试使用）。当在锚上使用伪 ::after 时，设置为绝对和 ul li 设置为相对，我得到了线，但我无法将线定位到 header 元素的顶部，其宽度为锚本身。

最好的方法是什么？

/* General & reset */

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Nunito', sans-serif;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  color: #fff;
  margin: 0;
  align-self: center;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: 'Merriweather', serif;
  font-weight: bold;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

a {
  color: #46ad8f;
  text-decoration: none;
}


/* End general & reset */


/* Header */

header {
  display: flex;
  justify-content: space-between;
  background: #4a4a4a;
  width: 100%;
  height: 108px;
  padding: 0 83px;
}

.main-nav,
.social-nav,
.logo,
ul li {
  display: inline-block;
}

div.logo,
.social-nav {
  display: flex;
}

.main-nav {
  flex-grow: 1;
  display: flex;
  margin-left: 20px;
}

.main-nav ul,
.social-nav ul {
  align-self: center;
}

.main-nav ul li,
.social-nav ul li {
  margin: 20px 5px;
  text-transform: uppercase;
}

header .social-nav ul li:hover {
  opacity: .5;
}

.main-nav ul li a {
  color: #fff;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Montserrat:wght@700&family=Nunito:wght@300;400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <title>Contact</title>
</head>

<body>
  <header>
    <div class="logo">
      <h1>TALENT</h1>
    </div>
    <nav class="main-nav">
      <ul>
        <li><a class="cool-link" href="#">Home</a></li>
        <li><a class="cool-link" href="#">About</a></li>
        <li><a class="cool-link" href="./portfolio.html">Portfolio</a></li>
        <li><a class="cool-link" href="#">Contact</a></li>
      </ul>
    </nav>
    <nav class="social-nav">
      <ul>
        <li>
          <a href="https://www.facebook.com" target="_blank"><img src="./img/facebook-icon.png" alt="facebook icon"></a>
        </li>
        <li>
          <a href="https://www.twitter.com" target="_blank"><img src="./img/twitter-icon.png" alt="twitter icon"></a>
        </li>
        <li>
          <a href="https://www.instagram.com" target="_blank"><img src="./img/instagram-icon.png" alt="instagram icon"></a>
        </li>
        <li>
          <a href="https://www.dribbble.com" target="_blank"><img src="./img/dribbble-icon.png" alt="dribbble icon"></a>
        </li>
        <li>
          <a href="https://www.behance.com" target="_blank"><img src="./img/behance-icon.png" alt="behance icon"></a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="slider">
      <div class="wrapper">
        <h2>Contact me</h2>
        <p>Nullam ac urna eu felis dapibus <a href="#">condimentum</a> sit amet a augue. Sed ut imperdiet nisi. Proin condimentum fermentum. Etiam pharetra, velit mauris egestas quam.</p>
        <p>Write me to <a href="mailto:henryreyes@example.com">henryreyes@example.com</a> or use the form below.</p>
        <div class="social-icons">
          <ul>
            <li class="fb">
              <a href="https://www.facebook.com" target="_blank"><img src="./img/facebook-icon.png" alt="facebook icon" title="Follow me on Facebook"></a>
            </li>
            <li class="tw">
              <a href="https://www.twitter.com" target="_blank"><img src="./img/twitter-icon.png" alt="twitter icon" title="Follow me on Twitter"></a>
            </li>
            <li class="inst">
              <a href="https://www.instagram.com" target="_blank"><img src="./img/instagram-icon.png" alt="instagram icon" title="Follow me on Instagram"></a>
            </li>
            <li class="dribble">
              <a href="https://www.dribbble.com" target="_blank"><img src="./img/dribbble-icon.png" alt="dribbble icon" title="Follow me on Dribbble"></a>
            </li>
            <li class="behance">
              <a href="https://www.behance.com" target="_blank"><img src="./img/behance-icon.png" alt="behance icon" title="Follow me on Behance"></a>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section class="contact">
      <div class="wrapper">
        <div>
          <h2>Drop me a line</h2>
          <p>Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed ut imperdiet nisi. Proin fermentum nunc.</p>
          <p>Etiam pharetra, velit mauris egestas quam. Sed ut roin seman condimentum fermentum nunc.</p>
        </div>
        <div class="contact-form">
          <form action="" method="POST">
            <label for="name">Name<span class="required-input">*</span></label>
            <input type="text" name="name" id="name" required>
            <label for="email">Email<span class="required-input">*</span></label>
            <input type="email" name="email" id="email" required>
            <label for="subject">Subject</label>
            <input type="text" name="subject" id="subject">
            <label for="message">Message<span class="required-input">*</span></label>
            <textarea name="message" id="message" cols="30" rows="10" required></textarea>
            <input type="submit" value="Submit">
          </form>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <nav class="footer-nav">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Portfolio</li>
        <li>Contact</li>
      </ul>
    </nav>
    <nav class="social-nav">
      <ul>
        <li>
          <a href="https://www.facebook.com" target="_blank"><img src="./img/facebook-icon.png" alt="facebook icon"></a>
        </li>
        <li>
          <a href="https://www.twitter.com" target="_blank"><img src="./img/twitter-icon.png" alt="twitter icon"></a>
        </li>
        <li>
          <a href="https://www.instagram.com" target="_blank"><img src="./img/instagram-icon.png" alt="instagram icon"></a>
        </li>
        <li>
          <a href="https://www.dribbble.com" target="_blank"><img src="./img/dribbble-icon.png" alt="dribbble icon"></a>
        </li>
        <li>
          <a href="https://www.behance.com" target="_blank"><img src="./img/behance-icon.png" alt="behance icon"></a>
        </li>
      </ul>
    </nav>
    <p>&copy; Copyright 2016, All Rights Reserved. Designed by <strong>Henry Reyes</strong>.</p>
  </footer>
</body>

</html>

Answer 1

只需将此添加到您的 css

.cool-link:hover{
      border-top: 1px solid #ffffff; 
}

在这种情况下，我放了白色，但你可以放你想要的颜色。还要检查填充。

此致

如何在导航栏中悬停时设置顶行

How to set top line on hover in navbar

css

hover

navbar

flexbox