我在我的网站上有一些锚标记,我需要根据设计有一个“自定义”下划线.
问题是当链接文本分成多行时,底部边框仅适用于锚的底线/底部.我可以通过给锚链接显示内联来解决这个问题,但是后来我失去了为它们提供边距的能力.
有没有什么方法可以给链接一个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>
解决方法
您可以使用：之前的伪元素,如下所示.
Updated fiddle
.inline:before{
content: ' ';
display: block;
margin-top: 20px;
}
