css - anchor 标签上的边框底部，适用于多行和内联 block / block 显示

Question

我的网站上有一些 anchor 标记，我需要根据设计添加“自定义”下划线。

问题是，当链接文本分成多行时，底部边框仅适用于底线/ anchor 底部。我可以通过给 anchor 链接显示内联来解决这个问题，但是我失去了给他们一个 margin top 的能力。

有什么方法可以让链接有 2px 的下划线并跨多行工作，同时还可以给它们一个边距顶部？

示例 fiddle :

https://jsfiddle.net/mjxfzrwk/

代码以防万一:

.custom-underline {
  border-bottom: 2px solid red;
  display: inline-block;
  margin-top: 20px;
}
.standard-underline {
  text-decoration: underline;
  display: inline-block;
  margin-top: 20px;
}
.inline {
  display: inline;
}
.container {
  width: 100px;
}
a {
  text-decoration: none;
  line-height: 29px;
  font-size: 20px;
}

<div class="container">
  <a class="custom-underline" href="">This has a good underline</a> 
  <br/>
  <a class="standard-underline" href="">This has a standard underline</a> 
  <br />
  <a class="custom-underline inline" href="">This has a good underline but display inline removed top margin</a>
</div>

Answer 1

您可以使用如下所示的 :before 伪元素。 Updated fiddle

.inline:before{
  content: ' ';
  display: block;
  margin-top: 20px;
}