How to use after and before pseudo elements with :active?

Question

I am creating CSS heart shape using after and before pseudo elements. but when I click on the shape only heart class's color changes to blue. I also want to change the color of every element of it. I don't know if we can use active and after and before pseudo element at the same time.I can't use them at the same time what could be the solution of this ?

.heart {
            width:100px;
            height:100px;
            background-color: rgb(255, 136, 156);
            position: absolute;
            top: 20%;
            left: 20%;
            transform: rotate(-45deg);
        }
        .heart::after{
            content: "";
            width:100px;
            height:100px;
            background-color: rgb(255, 136, 156);
            border-radius: 50%;
            top: 0%;
            position: absolute;
            left: 50%;
        }
        .heart::before {
            content: "";
            width:100px;
            height:100px;
            background-color: rgb(255, 136, 156);
            border-radius: 50%;
            top: -50%;
            position: absolute;
            left: 0%;
        }
        .heart:active {
            background-color: blue;
        }
        .heart::after + .heart:active {
            background-color: blue;
        }
        .heart::after:active {
            background-color: blue;
        }

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

you combining wrong way the pseudo class and pseudo element (after, before). you should combine it like this way .example:active::after — NIKHIL CHANDRA ROY, Oct 14 '20 at 16:25
@NIKHILCHANDRAROY yeah... Thanks mate.It was a silly mistake. ;) — Jeet Viramgama, Oct 14 '20 at 16:26

score 1 · Accepted Answer · answered Oct 14 '20 at 16:21

You must set as below, always pseudo element to the end:

.heart:active,
.heart:active::after,
.heart:active::before{
   background-color: blue;
}

DEMO:

.heart {
            width:100px;
            height:100px;
            background-color: rgb(255, 136, 156);
            position: absolute;
            top: 20%;
            left: 20%;
            transform: rotate(-45deg);
        }
        .heart::after{
            content: "";
            width:100px;
            height:100px;
            background-color: rgb(255, 136, 156);
            border-radius: 50%;
            top: 0%;
            position: absolute;
            left: 50%;
        }
        .heart::before {
            content: "";
            width:100px;
            height:100px;
            background-color: rgb(255, 136, 156);
            border-radius: 50%;
            top: -50%;
            position: absolute;
            left: 0%;
        }
        .heart:active,
        .heart:active::after,
        .heart:active::before{
            background-color: blue;
        }

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

Problem solved. Thank you. – Jeet Viramgama Oct 14 '20 at 16:23 — Jeet Viramgama, Oct 14 '20 at 16:23
@JeetViramgama You welcome, don't forget to validate answer – MaxiGui Oct 14 '20 at 16:24 — MaxiGui, Oct 14 '20 at 16:24

How to use after and before pseudo elements with :active?

1 Answers1

DEMO: