Change a:after style if child is img

Question

I am styling a hovered anchor by applying content with the :after pseudo attribute, which adds a border underneath:

a:hover {
    position: relative; }
    a:hover:after {
        content: '';
        position: absolute;
        left: 0;
        display: inline-block;
        height: 1em;
        width: 100%;
        border-bottom: 1px solid #a5cf4c;
        margin-top: 0.5em; }

This works fine, but there are also some anchors around images, and I don't want the border under them. For CSS this would only work with the non-existent parent selector a:after < img. I tried solving it with jQuery, but

You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. See Access the css ":after" selector with jQuery.

I looked some solutions on SO without the parent hurdle, but I can't get anywhere with this. Anyone?

score 2 · Accepted Answer · answered Oct 16 '16 at 18:42

You could add the after with a class.

$('a:not(:has(img))').addClass('after-affect');

a:hover {
  position: relative;
}
a.after-affect:hover:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid #a5cf4c;
  margin-top: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Anchor with text -->
<a href="#">test</a>

<!-- Anchor with image -->
<a href="#">
  <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/>
  </a>

Change a:after style if child is img

1 Answers1