One design challenge I'm facing is ensuring that anchor tags on my site have a custom underline that fits the overall look.
The problem arises when the link text wraps to multiple lines, as the bottom border only applies to the last line or the very bottom of the anchor. One potential solution is setting the display property of the anchor links to inline, but this sacrifices the ability to add a top margin.
Is there a way to apply a 2px underline to links that spans across multiple lines while still being able to give them a top margin?
Here is an example fiddle showcasing the issue:
https://jsfiddle.net/mjxfzrwk/
For reference, below is the code snippet used in the 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>