锚标签上的边框底部，适用于多行和内联块/块显示

Question

我的网站上有一些锚标记，根据设计，我需要添加 'custom' 下划线。

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

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

示例fiddle：

代码以防万一：

.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

那么对于颜色你可以使用这个

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

但是间距的事情不能用text-decoration:underline

来完成

Answer 2

您也可以将文本包裹在 span 内，然后将 border-bottom 应用到 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>

Answer 3

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

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

Answer 4

使用显示内联方法作为代码中的最后一个选项，然后尝试在 css

中添加以下样式

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

锚标签上的边框底部，适用于多行和内联块/块显示

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

css

anchor