I am trying to eliminate the hover effect from the content inserted using the css selector :after.
Below is my code where I want to remove the underline hover effect from >
HTML
<ul class="path_string_ul">
<li>Home</li>
<li>MENU</li>
<li>SUB-MENU</li>
<li>SUB-SUB-MENU></li>
</ul>
CSS
.path_string_ul li{
display:inline-block;
list-style:none;
cursor:pointer;
}
.path_string_ul li:hover{
cursor:pointer;
text-decoration:underline;
}
.path_string_ul li:after{
content:'>';
margin:0 10px;
pointer-events: none;
text-decoration:none !important; /*Doesn't work*/
}
.path_string_ul li:hover:after{
text-decoration:none !important; /*Doesn't work*/
}
.path_string_ul li:last-child:after{
content:none;
}
Check out this FIDDLE link for more details.