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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在应用 :active / :hover 等状态时，您还需要定位伪元素。

像这样：

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

这是一个工作 小提琴。

我还为你的伪元素添加了一个过渡，这样它们就可以很好地随着心的底部消失。

原文由 Tanasos 发布，翻译遵循 CC BY-SA 3.0 许可协议