在下面的代码中如何看到我使用了伪元素,实际上这就是为什么我感到困惑的原因。知道点击按钮后如何更改颜色吗?
.heart {
background-color: red;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
<div class="wrapper">
<a class="heart" href="#"></a>
</div>
如果您知道有关CSS绘图和动画的一些不错的教程,我将感谢您的链接。我已经使用过w3schools和freecodecamp。 感谢您的时间和答复!
如果只是单击它,则可以使用活动状态(请参见下面的示例代码):
如果要在元素处于焦点状态时更改颜色,请处于焦点状态: