I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes:
<div className="dropup-content">
<ul>
<li className="content-item">
<a
className="content-link"
href="#"
target="_blank"
>
<i
className={` content-icon `}
></i>
<div className="content-info">
<span
className={`content-info-name }`}
>
Name
</span>
<span className="content-info-subtitle"><Subtitle</span>
</div>
</a>
</li>
<li className="content-item">
.
.
.
</ul>
</div>
CSS:
.dropup {
position: relative;
display: inline-block;
transition: all 0.2s ease;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
bottom: 79px;
right: 3px;
width: 250px;
z-index: 1;
border-radius: 5px;
}
.dropup-content::before {
position: absolute;
bottom: -8px;
right: 25px;
left: auto;
display: inline-block !important;
border-right: 8px solid transparent;
border-top: 8px solid #f1f1f1;
border-left: 8px solid transparent;
content: "";
}
What I've tried:
.content-item:hover:last-child .dropup-content::before {
background:red;
}
https://i.stack.imgur.com/G4CLw.png
I need to change that color to gray on hover. What can I do?