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: https://codepen.io/SimplyCius/pen/JjXZjPm — Simplicius, Sep 13 '20 at 12:10
Does this answer your question? [Combine :after with :hover](https://stackoverflow.com/questions/13233991/combine-after-with-hover) — Sandrin Joy, Sep 13 '20 at 12:13

نور · Answer 1 · 2020-09-13T12:13:32.637

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 '20 at 12:13

answered Sep 13 '20 at 12:09

نور

1,425
2
22
38

Thanks @Abdulah Al Noor. But I need to change the color of `Hair` also. Thanks. – abu abu Sep 13 '20 at 12:11
Thanks @Abdullah Al Noor. I would like to avoid this portion `.category:hover{ color: red !important; }`. – abu abu Sep 13 '20 at 12:45
1

@abuabu i did not understand .. what do you want actually ? – نور Sep 13 '20 at 12:50
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. – abu abu Sep 13 '20 at 12:57
1

`::after` and `li.category` are two separate element ... i think it's not possible ... – نور Sep 13 '20 at 13:14

Hover with :after in CSS

1 Answers1