How to combine the ::after and :not pseudo selectors - css

Question

I have the following SASS code:
section.post {
a {
transition: all $aside-animation-time;
&::after {
position: absolute;
bottom: -.5px;
left: 0;
width: 100%;
height: 0;
content: '';
border-bottom: 1px solid $primary-color;
}
&:hover {
border-color: $hover-color;
}
}
}
What I'm doing here is adding a blue bottom border for all links. However, I noticed that when I use anchor tags with images inside, the image also has the border (since it's a link as well). Now, my goal is to append the anchor styles to text links only.
What I tried so far is using :not(img), chaining it with ::after, overriding the previous rules etc., but nothing worked as expected. Any help would be appreciated.

Answer 1

Currently CSS doesn't have an option to style the parent based on any child elements. If you were styling the image itself with the link it would be fine.
You might be able to use something like jQuery to add a class to any links which contain child images:
$('a:has(img)').addClass('has_img');
You can then use this with your CSS :not as in
section.post {
a:not(.has_img) {
transition: all $aside-animation-time;
&::after {
position: absolute;
bottom: -.5px;
left: 0;
width: 100%;
height: 0;
content: '';
border-bottom: 1px solid $primary-color;
}
&:hover {
border-color: $hover-color;
}
}
}

Answer 2

Maybe this will help you.
a {
display: block;
height: 2.5em;
position: relative;
&:after {
border-bottom: thin solid blue;
bottom: 0;
content: '';
left: 0;
position: absolute;
width: 100%;
}
&:hover:after {
border-bottom-color: red;
}
img {
display: block;
height: inherit;
position: relative;
z-index: 1;
}
}
Quick Codepen sample:
http://codepen.io/vkjgr/pen/WvMGRK