删除:悬停效果来自:内容后

Question

我想从使用css选择器添加的内容中删除悬停效果:after.我的代码如下所示我想删除悬停效果(下划线)>

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; /*Not working*/
        }
        .path_string_ul li:hover:after{
            text-decoration:none !important; /*Not working*/
        }
        .path_string_ul li:last-child:after{
            content:none;
        }

这是FIDDLE链接

Answer 1

这是因为默认情况下display所产生的伪元素的属性:after选择是inline这样的text-decoration属性不应用于元素.您可以将该display属性设置为inline-block:

.path_string_ul li:after {
     content:'>';
     margin:0 10px;
     pointer-events: none;
  +  display: inline-block;
     text-decoration:none !important;
}