title: anchor link is not clickable in full width
body: <p>I make a list that looks like the picture below. My problem is that not the whole link is clickable, only the text. I can't make a <code>display: block</code> on the <code>anchor</code> and give the link the full width because I already gave the <code>anchor</code> <code>display: table-cell</code>.</p>
  
  <p>Here you can can see my problem and try out your code:
  <a href="http://jsfiddle.net/kma_999/v0xkk587/" rel="nofollow noreferrer">http://jsfiddle.net/kma_999/v0xkk587/</a></p>
  
  <p>Thanks in advance!</p>
  
  <p><img src="https://i.stack.imgur.com/gke4p.jpg" alt="Image of the list"></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="pane-content"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Kostenkontrolle (Mobile)&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sunrise Rechnung&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Umzug&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;iPhone&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Telefonieren im Ausland (Roaming)&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>ul {
      border: 1px solid lightgray;
      padding-left: 0px;
  }
  
  ul li {
      border-bottom: 1px solid lightgray;
      list-style: none outside none;
      margin-left: 20px;
      margin-right: 20px;
      vertical-align: middle;
  }
  
  ul li:last-child{
      border-bottom: 0px solid black; 
  }
  
  ul li a {
      display: table-cell;
      height: 75px;
      vertical-align: middle;
      padding-left: 20px;
      color: black;
      width: 100%;
  }
  
  ul li a:hover{
      color: black;
      text-decoration: none;
  }
  
  ul li a:after {
      content: "\25b6";
      font-size: 10px;
      position: absolute;
      right: 33px;
  }
  </code></pre>