Question

我的网站上有一些锚标记，我需要有一个＆＃39;自定义＆＃39;根据设计强调。

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

有什么方法可以给链接一个2px的下划线并且可以在多行上工作，同时还可以给它们一个上限？

示例小提琴：

代码只是加入：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用下面的:before伪元素。 Updated fiddle

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

Answer 2

颜色好你可以用这个

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

但text-decoration:underline

无法完成间距事项

Answer 3

您还可以将文字换成span并将border-bottom应用于范围

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

使用display inline方法作为代码中的最后一个选项，然后尝试在css中添加以下样式

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

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

4 个答案: