title: SASS :after :hover selector
body: <p>How do I use a SASS selector within a pseudo selector on a hover state? Wanting to write less code and clean this up.</p>
  
  <p>Preferred method, not working:</p>
  
  <pre><code>div {
      a {
          transition: all 0.25s ease-in-out;
          &amp;:after {
              content: "&gt;&gt;";
              left: 10px;
              :hover &amp; {
                  left: 10px;
              }
          }
      }
  }
  </code></pre>
  
  <p>As opposed to:</p>
  
  <pre><code>div {
      a {
          transition: all 0.25s ease-in-out;
          &amp;:after {
              content: "&gt;&gt;";
              left: 10px;
          }
          &amp;:hover {
              &amp;:after {
                  left: 10px;
              }
          }
      }
  }
  </code></pre>