使用CSS将整个<li>作为链接

Question

我尝试过以下操作，但效果不理想。我想覆盖整个标签作为链接，但只有红色部分成为链接。我想将红色边框扩展到整个标签但不知道如何操作。更改填充大小会导致选项卡与红色边框一起扩展。

CSS

.tabed .tabs li a {
    display: block;
    padding: 0px 15px;
    text-align: center;
    border: solid #F00 2px;

这是JSFiddle：

https://jsfiddle.net/XingPing/j8zgrnev/