외부 링크 CSS : 텍스트 링크 대 img 링크

Question

위키에있는 화살표 아이콘을 표시 할 외부 링크 내용은 :after입니다.

a[href^="https://"] 
:not([href*="mysite.com"]) 
:after{ 
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);  
} 

그러나 링크도 이미지가 아닌 텍스트입니다. 그 사람들을 위해 나는 :after 콘텐츠를 원하지 않는다. 나는 그 대신에 그림자를 원한다. 그러나 나는 그것을 어떻게하는지 이해할 수 없다.

대부분의 이미지 링크는 텍스트 링크없이 겹쳐 쌓인 비 연결 이미지가 없으므로 div로 감싸고 해당 div를 스타일을 제거하여 제거 할 수 있습니다. 모든 링크의 내용 다음에 호버에 그림자 추가 모든 이미지. 하지만 그것은 div를 중첩하는 것입니다. 더하기 divs 외의 이미지 링크가 없다는 것을 의미합니다.

Answer 1

: 자신의 링크 중 하나가 (아이에 텍스트) 완전히 비어 있습니다하지 않는 한 문제가 해결되지 않도록, 텍스트를 포함하여 내부에 컨텐츠를 확인합니다 빈. 이미지가 있거나없는 코드 예제를 제공 할 수 있다면 좋을 것입니다.

중첩 div가없는 대신 <img>을 중첩하는 경우 이미지가있는 링크가있을 때 클래스를 추가하기 만하면됩니다. 그런 다음 스타일을 다르게 지정하십시오. 제거

Answer 2

텍스트가있는 앵커 요소에 이미지가있는 앵커 요소가 없다고 가정하면 다음을 사용할 수 있습니다. css empty selector :

a[href^="https://"]:not([href*="mysite.com"]):empty:after{ 
    content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); 
}