我的网站上有一些 anchor 标记,我需要根据设计添加“自定义”下划线。
问题是,当链接文本分成多行时,底部边框仅适用于底线/ anchor 底部。我可以通过给 anchor 链接显示内联来解决这个问题,但是我失去了给他们一个 margin top 的能力。
有什么方法可以让链接有 2px 的下划线并跨多行工作,同时还可以给它们一个边距顶部?
示例 fiddle :
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>
最佳答案
您可以使用如下所示的 :before
伪元素。 Updated fiddle
.inline:before{
content: ' ';
display: block;
margin-top: 20px;
}
关于css - anchor 标签上的边框底部,适用于多行和内联 block / block 显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37024931/