title: Enable :hover on margin
body: <p>Is there any possibility to enable the :hover css effect also on the "margin area" of an object? I found a dirty solution working with an extra div inside, but is there something more elegant for this simple structure: </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a&gt;Hello&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;Hello&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul {
    list-style: none; 
    margin: 0px; 
    padding: 0px;
  }
  
  li {
    margin: 5px 100px;
    background-color: #f1f1f1;
  }
  
  li:hover a {
    color: red;
  }
  
  #dirty {
    padding: 0px 100px;
    margin: 0px -100px;
  }
  </code></pre>
  
  <p>Hey is my working dirty example: <a href="https://jsfiddle.net/equalsound/wn4ctxvh/" rel="noreferrer">https://jsfiddle.net/equalsound/wn4ctxvh/</a></p>
  
  <p>If possible, a css only solution would be lovely.</p>