CSS：边框底部将内容推离中心

Question

我使用弹性盒模型将a标签垂直居中。当我将类active应用于a标记时，我希望在其底部有一个边框，但是我希望它和内容之间有空间。我在其底部添加了padding-bottom，但同时也将a标签内容推到了中心之外。如何在不将a标签内容移出中心的情况下完成此操作？

.tabs {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
}

.active {
  color: #111111 !important;
  border-bottom: 3px solid #111111;
  cursor: default;
  font-family: 'Avenir-Heavy'
}

<div class="tabs">
  <img src="">
  <a class="active">Shop</a>
  <a>Orders</a>
</div>