Nesting SCSS to change color of background of ::after on :hover

Question

Objective

To have an orange tint when hovering over a link.

Dark tint by default.

I understand I might have other conflicts. But am I at least nesting this order correctly?

Background

I had this issue previously to wanting a colored layer over my image. I was able to get the darker layer on there fine. But when hovered over, the dark layer should not be seen, but replaced with an orange tint.

Code

I have this demo on CodePen

HTML

<li>
  <a href="">
    <img src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg">
  </a>
</li>

SCSS

li {
  > a::after {
    background-color: rgba(30,30,30,0.6);

    &:hover {
      background-color: rgba(255,128,0,0.5);
    }
  }
}

@Jack well yes that worked perfectly. For some reason when I implemented the code into my real project the black layer remains instead of the orange. — JGallardo, Nov 20 '15 at 00:32
Unless you have a Sass->CSS compilation issue, only post the compiled CSS (and do not use the sass related tags) — cimmanon, Nov 20 '15 at 02:17
@JGallardo: Can you create a demo with code from your real project? The problem seems to be elsewhere in the code. — Harry, Nov 20 '15 at 05:23
Seems like a pretty simple pure SCSS authoring problem to me. The dupe link tells you what constitutes valid CSS but says nothing about how to arrive at it from SCSS based on the given code (other than by scrapping it completely and just writing pure CSS, in which case, why have preprocessors at all?). — BoltClock, Nov 21 '15 at 04:14

BoltClock · Accepted Answer · 2015-11-21T04:18:00.550

I understand I might have other conflicts. But am I at least nesting this order correctly?

The nesting appears to be incorrect. In Selectors 3, which is the standard currently implemented by all browsers, a pseudo-class may not appear after a pseudo-element, but you have a :hover rule within an ::after rule, i.e. a pseudo-class within a pseudo-element. If Sass isn't outright refusing to compile your code, then presumably it's compiling it into something like this:

li > a::after:hover {
  background-color: rgba(255,128,0,0.5);
}

This is not valid CSS, so it won't work.

If you're looking to change the tint of the ::after on a:hover, the best you can do is this, since the pseudo-element must appear last but the :hover is where your rules differ:

li {
  > a {
    &::after {
      background-color: rgba(30,30,30,0.6);
    }
    &:hover {
      &::after {
        background-color: rgba(255,128,0,0.5);
      }
    }
  }
}

(optionally, flattening the li > a and &:hover::after portions if you don't need such granular amounts of nesting)