I have a ul-li list and when i hover last li ::before element looks white and not so good. So i need change it when i hover last li element. How can i make it ? 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;
}

I need change that color to gray as hover. So what can I do?