Border bottom on anchor tags, which works on multiple lines and with inline block / block display

Question

I have some anchor tags across my site that I need to have a 'custom' underline according to the design.

The issue is that when the link text breaks to multiple lines the bottom border only applies to the bottom line / the bottom of anchor. I can solve this by giving the anchor links a display of inline, but then I lose the ability to give them a margin top.

Is there any way I can give links a underline of 2px and works across multiple lines whilst also being able to give them a margin top?

Example fiddle:

https://jsfiddle.net/mjxfzrwk/

Code just incase:

.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

You can use :before pseudo element like below. Updated fiddle

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

Answer 2

You can also wrap your text inside span and apply border-bottom to span

a {
  width: 100px;
  display: block;
  text-decoration: none;
  margin-top: 50px;
}
span {
  border-bottom: 2px solid red;
}

<a href=""><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quisquam.</span></a>