CSS :before :after 背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41807202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :before :after background color
提问by Ah Quan
I want to turn the heart shape black upon click but changing .heart's color won't affect its :before :after selector. Is there any way to do so?
我想在单击时将心形变为黑色，但更改 .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;
}
回答by Tanasos
You need to target your pseudo-elements when applying an :active / :hover etc. state as well.
在应用 :active / :hover 等状态时，您还需要定位您的伪元素。
Like so:
像这样：
.heart:active::before,
.heart:active::after {
background: black;
}
Here is a working Fiddle.
这是一个工作小提琴。
I also added a transition for your pseudo elements, so that they can fade nicely with the bottom part of the heart.
我还为你的伪元素添加了一个过渡，这样它们就可以随着心脏的底部很好地淡化。
回答by Shaggy
Simply change the value of the backgroundproperty of the pseudo-elements to inheritand it will match the backgroundof the parent .heartelement at all times. This way you don't have to remember to add more rules if you add more colour changes in the future. And it has the added bonus of inheriting the transition from red to black from the parent.
只需background将伪元素的属性值更改为inherit，它就会始终匹配background父.heart元素的 。这样，如果您将来添加更多颜色更改，您就不必记住添加更多规则。它还具有从父级继承从红色到黑色的过渡的额外好处。
.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>回答by Nesha Zoric
In your case, as mentioned before, you need to specifically target the before and after pseudo elements. the way to do this is by adding the following CSS:
在您的情况下，如前所述，您需要专门针对 before 和 after 伪元素。这样做的方法是添加以下 CSS：
.element:active::before,
.element:active::after{
background-color: #000;
}
This way you will target the before and after pseudo elements when your element is active. There is a great article hereexplaining the before and after property.
这样，当您的元素处于活动状态时，您将定位之前和之后的伪元素。有一个伟大的文章在这里之前和财产之后解释。
