title: <a> tag inside <li> padding transition moves the list on hovering the first element
body: <p>I'm trying to do a list with a <code>padding-left</code> transition on hovering the tag inside the <code>&lt;li&gt;</code> tag, as you can see in the following fiddle:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li {
      padding-left: 0;
      transition: padding 0.5s ease-out;
  }
  li:hover {
      padding-left: 10px;
  }
  div {
      display: flex;
      padding: 5% 20%;
      justify-content: center;
      align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;img src="https://upload.wikimedia.org/wikipedia/it/4/46/Yoda.JPG" alt="Yoda from wikipedia" width=300 height=300&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Send me an email!&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Give me a call!&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you hover over (sorry) the first element (<em>'Send me an email'</em>), you will see that the image on the left gets pushed away, while this does not happen if you hover over (sorry again) the second element (<em>'Give me a call'</em>).</p>
  
  <p>I'd like to achieve the second behaviour for all the elements in the list, but I cannot solve the problem with the first element. What's wrong with the code? Is it a bug?</p>
  
  <p>Code was tested both on Edge and Chrome (latest versions).</p>