Друзья, есть элементы списка для которых действует псевдокласс :hover
. Маркеры для этого списка созданы при помощи псевдоэлемента :after
. Проблема в том, что при наведении курсора на псевдоэлемент работает :hover
для элемента списка. Как это можно исправить?
.main_menu li {
display: inline-block;
position: relative;
color: black;
text-transform: uppercase;
line-height: 30px;
cursor: pointer;
list-style: none;
padding: 0px;
height: 30px;
width: 75px;
text-align: center;
border: 1px solid black;
margin: 10px;
}
.main_menu li:hover {
color: #ffe600;
}
.main_menu li:after {
display: block;
position: absolute;
content: "";
width: 10px;
height: 10px;
background-color: #ffe600;
top: 10px;
right: -15px;
cursor: default;
}
<ul class="main_menu">
<li>Home</li>
<li>Services</li>
<li>Work</li>
</ul>