锚标签上的边框底部,适用于多行并具有内联块/块显示

Question

我在我的网站上有一些锚标记,我需要根据设计有一个"自定义"下划线.

问题是当链接文本分成多行时,底部边框仅适用于锚的底线/底部.我可以通过给锚链接显示内联来解决这个问题,但是后来我失去了为它们提供边距的能力.

有没有什么方法可以给链接一个2px的下划线并且可以跨多行工作,同时还能给他们一个保证金顶部？

示例小提琴:

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伪元素，如下所示。更新了小提琴

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