如何在悬停时在链接上方添加图像？

Question

我的页面顶部有一个导航栏，我希望出现翻转效果，当您将鼠标悬停在链接上时，链接上方会出现一个灯泡图标。使用 CSS 实现此目的的最佳方法是什么？

.navbar .nav a, .navbar .nav .a {
  font-size: 16px;
}

.navbar .nav a:hover, .navbar .nav .a:hover {

   background-image: url('lightbulb.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    display:block;
}

Answer 1

为了确保灯泡恰好位于文本上方，我想我会将背景代码放入伪元素中，以便可以将其放置在文本顶部。

这个简单的代码片段使用填充在元素上方留下了一些空间 - 这完全取决于您在实际示例中想要如何做到这一点，当然可能是导航栏的定位？

a {
  font-size: 16px;
  padding-top: 20px;
  display: inline-block;
  position: relative;
}

a::before {
  content: '';
  position: relative;
  height: 20px;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  display: inline-block;
}

a:hover::before {
  background-image: url('https://i.sstatic.net/dp2LF.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

<a href='#'>Hover</a>

Answer 2

body {
  margin: 3rem;
}

nav {
  display: flex;
  gap: 2.5rem;
}

nav div {
  cursor: pointer;
}

nav li {
  position: relative;
  list-style: none;
}

nav li::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  left: calc(50% - 15px);
  top: -30px;
  display: none;
  background-image: url('https://media.istockphoto.com/vectors/light-bulb-icon-vector-light-bulb-ideas-symbol-illustration-vector-id1167459261?k=20&m=1167459261&s=170667a&w=0&h=3KSKkFUNQoPvoS70bzIWeT1fXRuB9rzap6VC1HipCgg=');
  background-size: contain;
}

nav div:hover li::before {
  display: block;
}

<nav>
  <div>
    <li>List Item</li>
  </div>
  <div>
    <li>List Item</li>
  </div>
</nav>