hover durumu: Sırasız liste şekil vermeden önce

Question

Sırasız bir liste var. ve daha önce şekil olarak kare bir şekil oluşturdum. Ama ben şu anki sonuca ulaşmak için şu ana kadar hiç bir tavsiyede bulunmamaya çalışıyorum: <li> Teşekkürler!

HTML

<nav class="menu-vertical"> 
     <ul> 
      <li><a href="">NEWS</a></li> 
      <li><a href="">REVIEWS</a></li> 
      <li><a href="">MAGAZINE</a></li> 
      <li><a href="">PODCAST</a></li> 
     </ul> 
</nav> 

CSS

.menu-vertical ul { 
list-style-type: none; 
margin-left: 20px; 
margin-right: 20px; 
padding: 0; 
width: auto; 
background-color: #f1f1f1; 
font-family: 'Open Sans', sans-serif; 
} 

.menu-vertical ul li { 
list-style: none; 
} 

.menu-vertical ul li:before { 
content:""; 
width: 10px; 
height: 10px; 
vertical-align:middle; 
background-color: fuchsia; 
position: absolute; 
margin-top:6px; 
transition: background-color 0.2s ease-in-out; 
transition: text-decoration 0.2s ease-in-out; 

} 

.menu-vertical ul li a { 
display: block; 
color: #000; 
padding-left: 20px; 
padding-bottom: 10px; 
text-decoration: none; 
font-size: 14px; 
transition: color 0.2s ease-in-out; 
} 

.menu-vertical ul li a:hover { 
color: #36b3d5; 
text-decoration: underline; 
} 

Bunun için yapmaya çalışıyordu:

.menu-vertical ul li:before a:hover ama işe yaramadı :(

Answer 1

bu deneyin:

.menu-vertical ul li:hover:before { background-color: red; } 

See this fiddle

Answer 2

Başka CSS kuralını eklemek zorunda:

.menu-vertical ul li:hover:before { 
    background-color: #36b3d5; 
}