有什么原因导致此CSS无法正常工作？

a[href^="http"]:after {
    content:"";
    width:10px;
    height:10px;
    display:inline-block;
    background-color:red;
}

a[href^="http"] img ~ :after {
    display:none;
}

..在这个HTML上？

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img src="https://www.google.com/logos/classicplus.png">
</a>

这个想法是在匹配的锚标签上有一个伪元素。但是我不希望它适用于包装图像的锚标签。而且由于我无法使用诸如来定位锚a < img，所以我想也许可以通过找到一个与之类似的图像来定位：after伪元素。

任何见识将不胜感激。