CSS :before :after 背景颜色

Question

我希望在点击后将心形图案变为黑色，但更改.heart的颜色不会影响其:before和:after选择器。有什么办法可以实现吗？

.heart {
  background-color: red;
  height: 60px; /*dimension of the square*/
  position: relative;
  top: 40px; /*position from top*/
  transform: rotate(-45deg); /*negative = counter clockwise, put 0 to try*/
  width: 60px; /*dimension of the square*/
  transition: all 1s ease; /*length of animation*/
}

.heart:before,
.heart:after {
  content:""; /*kosong, for it to exist*/
  background-color: red;
  border-radius: 50%; /*perfect round curve*/
  height: 60px; /*dimension of the shape*/
  position: absolute;
  width: 60px; /*dimension of the shape*/
}

.heart:before {
  top: -30px; /*position of the left shape*/
  left: 0; /*remember rotated ACW 45deg*/
}

.heart:after {
  left: 30px; /*position of the right shape*/
  top: 0px; /*remember rotated ACW 45deg*/
}

.heart
    {
        opacity:0.3; /*original state*/
    }
.heart:hover
    {
        opacity:1; /*hover state*/
    }
.heart:active
    {
        opacity:1; /*hover state*/
        background:black;
    }

- Nate

---

寻求代码帮助的问题必须在问题本身中包含最短的必要代码以便重现，最好使用Stack Snippet。请参阅如何创建一个最小、完整且可验证的示例。 - Paulie_D

请上传一个同时包含 HTML 和 CSS 的 fiddle，这样我们可以更轻松地帮助你。 - Krystian Borysewicz

谢谢，下次会做到的！ - Nate

@AhQuan，他们的意思是你应该编辑这个问题，包括他们要求的额外信息。 - Shaggy

Answer 1

当应用 :active / :hover 等状态时，您需要针对伪元素进行定位。

像这样：

.heart:active::before,
.heart:active::after {
  background: black;
} 

这里是一个可工作的Fiddle。

我还为您的伪元素添加了一个过渡效果，以便它们可以与心形图案的底部部分平滑淡出。

- Tanasos

Answer 2

只需将伪元素的background属性值更改为inherit，它将始终与父级.heart元素的background相匹配。这样，如果将来添加更多颜色变化，您就不必记住添加更多规则。它还有一个额外的好处，可以从父级继承从红色到黑色的过渡效果。

.heart{
  background:#f00;
  height:60px;
  left:30px;
  opacity:.3;
  position:relative;
  top:40px;
  transform:rotate(-45deg);
  transition:background 1s ease,opacity 1s ease;
  width:60px;
}
.heart:hover{
  opacity:1;
}
.heart:active{
  background:#000;
  opacity:1;
}
.heart:before,.heart:after{
  content:"";
  background:inherit;
  border-radius:50%;
  height:60px;
  position:absolute;
  width:60px;
}
.heart:before{
  left:0;
  top:-30px;
}
.heart:after{
  left:30px;
  top:0;
}

<div class="heart"></div>

- Shaggy

Answer 3

在您的情况下，如前所述，您需要特别针对伪元素 before 和 after 进行定位。实现这一点的方法是添加以下 CSS 代码：

.element:active::before,
.element:active::after{
  background-color: #000;
}

这样，当您的元素处于活动状态时，您将针对其前后伪元素。有一篇很棒的文章在这里解释了before和after属性。

- Nesha Zoric