Hover with :after in CSS

Question

My HTML is like below

<li class="category">Hair</li>

My CSS code is like below

.category:hover:after {
    position: absolute;
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    right: 18px;
    top: 15px;
    font-size: 18px;
    color: #ff0052;
}

When I hover on Hair, color is not changing to #ff0052.

Yeah, true. Figured this aswell, might use ::after instead of :after, see here: codepen.io/SimplyCius/pen/JjXZjPm — Simplicius
– Simplicius, Commented Sep 13, 2020 at 12:10

نور · Accepted Answer · 2020-09-13 12:13:32Z

1

.category {
   position: relative;
   cursor: pointer;
}
.category:hover{
   color: red !important;
}

.category:hover::after {
   content: "++";
    position: absolute;
    font-weight: 900;
    top: 15px;
    font-size: 18px;
    color: red !important;
}

<li class="category">Hair</li>

edited Sep 13, 2020 at 12:13

answered Sep 13, 2020 at 12:09

نور

1,5473 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

abu abu Over a year ago

Thanks @Abdulah Al Noor. But I need to change the color of Hair also. Thanks.

abu abu Over a year ago

Thanks @Abdullah Al Noor. I would like to avoid this portion .category:hover{ color: red !important; }.

نور Over a year ago

@abuabu i did not understand .. what do you want actually ?

abu abu Over a year ago

Actually I did like you before. But I would like to avoid .category:hover{ color: red !important; }. Is possible to get same functionality without that portion ? Thanks.

نور Over a year ago

::after and li.category are two separate element ... i think it's not possible ...

Collectives™ on Stack Overflow

Hover with :after in CSS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related