用伪元素隐藏父文本绝对定位

Question

我有一个包含图标和隐藏文字的<a>标签列表。我在这些标签上面有额外间距的问题。

我已将其缩小到伪元素的position: absolute条目。

如何在保持绝对定位的同时删除这个额外空间？

（JSFiddle）

a {
  height: 20px;
  width: 20px;
  font-size: 0;
  display: block;
  position: relative;
}
a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
ul {
  padding: 0;
  margin: 0;
  height: 20px;
  outline: 1px solid blue;
}
li {
  padding: 0;
  margin: 0;
  height: 20px;
  display: inline-block;
  outline: 1px solid red;
}

<ul>
  <li><a>TEST</a></li>
</ul>

Answer 1

在display: inline-block元素上使用vertical-align: top和<a>。

a {
  height: 20px;
  width: 20px;
  font-size: 0;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

a {
  height: 20px;
  width: 20px;
  font-size: 0;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
ul {
  padding: 0;
  margin: 0;
  height: 20px;
  outline: 1px solid blue;
}
li {
  padding: 0;
  margin: 0;
  height: 20px;
  display: inline-block;
  outline: 1px solid red;
}

<ul>
  <li><a>TEST</a></li>
</ul>

Answer 2

将vertical-align: top添加到您的li元素。

li {
    padding: 0;
    margin: 0;
    height: 20px;
    display: inline-block;
    outline: 1px solid red;
    vertical-align: top;
}

Fiddle