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

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.

I'm pretty sure that's gonna be hard(ish) after all you're styling the link, not the image. You may need to rethink your approach. — Paulie_D, Jul 01 '15 at 08:31
@Brewal: It's either. In fact, [the latter is now preferred](http://stackoverflow.com/questions/17684797/should-i-use-single-colons-or-double-colons-for-before-after-first-le/28527928#28527928). — BoltClock, Jul 01 '15 at 08:32
@BoltClock Ok nevermind... Why is the latter better ? (ok thanks for the link) — Brewal, Jul 01 '15 at 08:33
Essentially a duplicate of - http://stackoverflow.com/questions/9060763/remove-link-underline-from-image-only-if-the-anchor-tag-contains-an-img — Paulie_D, Jul 01 '15 at 08:37
@Paulie_D: The underline here is created using a pseudo-element, not a bottom border or a text decoration. — BoltClock, Jul 01 '15 at 08:39
You'll have either to add a class to the `a` elements containing `img`, or add a `span` into the `a` elements that does not. — Brewal, Jul 01 '15 at 08:40
True but I think the principal is the same....it's almost a **parent selector** issue. — Paulie_D, Jul 01 '15 at 08:40
it could be useful to see an example of the style created with the link, maybe it is possible to play with some css applied to the image and hide that style — Fabrizio Calderan, Jul 01 '15 at 08:41
There could be indeed [a way](http://jsfiddle.net/axtny7pw/) to hide the border, but it makes the code quite ugly IMO. — Brewal, Jul 01 '15 at 08:51
or apply a `box-shadow: 1px 0 0 1px #fff;` to the image instead of negative margin-bottom — Fabrizio Calderan, Jul 01 '15 at 08:55
Yes. It seems you want to target the pseudo selector of a parent. http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — harrypujols, Jul 01 '15 at 14:35

score 2 · Accepted Answer · answered Jul 01 '15 at 13:35

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;
    }
  }
}

score 0 · Answer 2 · answered Jul 01 '15 at 13:58

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

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

2 Answers2