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;
}

Answer 2

您可以为float:right设置:after，以便text-decoration:underline不受影响。

.path_string_ul li:after {
   content:'>';
   float:right;
   height:100%;
   margin-left:10px;
   pointer-events: none;                
}

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

2 个答案:

Demo.