CSS：before：背景色の後

Question

クリック時にハートシェイプを黒にしたいが、心の色を変更しても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; 
    } 

Answer 1

：アクティブ/：ホバーなどの状態を適用する場合は、擬似要素をターゲットにする必要があります。

ので、同じように：ここで

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

は作業Fiddle.

である彼らは心の底の部分とうまくフェードことができるように私はまた、あなたの擬似要素のトランジションを追加しました。

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>