Question

我正在尝试更改伪元素的背景，但是我很难过，我不知道是否应该使用ID和ID而不是类，但这不应该是我的错PoV，我的菜单中有4个项目，我希望所有这些项目都将伪元素背景切换为白色，所以这是我的代码。

.menu li a:hover::after{
    background: #FFF;
}
.menu a::after{
    content: '';
    display: block;
    width: 100%;
    height: .25rem;
    position: relative;
    bottom: -.25rem;
    left: 0;
    z-index: 2;
}
.menu li:nth-child(1) a::after{
    background: #da4167;
}

Answer 1

只需进行以下更改：

.menu li a:hover:after{
    background: #FFF;
}

Answer 2

如果要为所有链接添加白色背景，只需将background-color添加到.menu a :: after。如果我正确理解你的话。

body{
  background: #000;
}
.menu li {
  padding-bottom: 0.5rem;;
}
.menu li a:hover {
  color: #fff;
  background: #da4167;
}
.menu li a:hover::after {
  background: #fff;
}
.menu li a{
  color: #da4167;
  display: block;
}
.menu a::after{
    content: '';
    display: block;
    height: .25rem;
    position: relative;
    bottom: -.25rem;
    left: 0;
    z-index: 2;
    background: #da4167;    
}

.simple li {
  padding-bottom: 0.5rem;;
}
.simple li a {
  color: #da4167;
  display: block;
  padding-bottom: 0.25rem;
  border-bottom: 0.25rem #da4167 solid;
}
.simple li a:hover {
  color: #fff;
  background: #da4167;
  border-bottom: 0.25rem #fff solid;
}

<ul class="menu">
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
  <li><a href="">Item4</a></li>
</ul>

<ul class="simple">
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
  <li><a href="">Item4</a></li>
</ul>

伪元素悬停

2 个答案: