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

问题

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>

回答1:

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

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

回答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>

回答3:

Well for color you can use this

a{
    text-decoration: underline;
    -moz-text-decoration-color: red; /* Code for Firefox */
    text-decoration-color: red;
}

But the spacing thing cannot be done with text-decoration:underline

回答4:

use display inline method as the last option in your code and then try adding below styles in your css

.inline:before{
     content: " ";
     height:20px;
     display: block;
 }

来源：https://stackoverflow.com/questions/37024931/border-bottom-on-anchor-tags-which-works-on-multiple-lines-and-with-inline-bloc

标签

css

anchor