时间戳

首页 > 解决方案 > How to override the ::after CSS selector?

html - How to override the ::after CSS selector?

问题描述

I want to remove the icon from Hello2 href link while keeping my css code. How to override the a[target="_blank"]:after style ?

HTML:

<a class="" href="#" target="_blank">Hello1</a>

<a class="" href="#" target="_blank">Hello2</a>

CSS:

        a[target="_blank"]:after {
  content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
      margin: 0 3px 0 5px;
    }

JSFiddle: https://jsfiddle.net/xbaha/kxdzwro4/7/

标签： htmlcss

解决方案

您可以将一个类添加到第二个a标签，然后使用 将其从after选择器中排除not。

a[target="_blank"]:not(.no-icon):after {
      content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
      margin: 0 3px 0 5px;
    }
<a class="" href="#" target="_blank">Hello1</a>
    
<a href="#" target="_blank" class="no-icon">Hello2</a>

推荐阅读