html - 删除 :hover effects from :after content

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

这是因为 :after 选择器生成的伪元素默认的 display 属性是 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;
}