title: Nesting SCSS to change color of background of ::after on :hover
body: <h2>Objective</h2>
  
  <p>To have an orange tint when hovering over a link. </p>
  
  <p>Dark tint by default.</p>
  
  <p>I understand I might have other conflicts. But am I at least nesting this order correctly?</p>
  
  <h2>Background</h2>
  
  <p>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.</p>
  
  <h2>Code</h2>
  
  <p>I have this <a href="http://codepen.io/JGallardo/pen/QjoeJW" rel="nofollow">demo on CodePen</a></p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;li&gt;
    &lt;a href=""&gt;
      &lt;img src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg"&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <h3>SCSS</h3>
  
  <pre><code>li {
    &gt; a::after {
      background-color: rgba(30,30,30,0.6);
  
      &amp;:hover {
        background-color: rgba(255,128,0,0.5);
      }
    }
  }
  </code></pre>