An anchor tag border bottom that works on multiple lines and has a built-in block / block display

Question

I have some anchor tags on my site that I need to have a "custom" underline in accordance with the design.

The problem is that when the link text is split into several lines, the lower border only applies to the bottom line / bottom of the anchor. I can solve this by giving anchored links a display of inline ones, but then I lose the ability to give them a top edge.

Is there a way that I can give links a 2px underline and works on multiple lines, and can also give them an upper bound?

Example script:

https://jsfiddle.net/mjxfzrwk/

The code is just paste:

.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

You can use the :before pseudo-element as shown below. Updated script

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

Answer 2

Good for color you can use this

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

But the distance between them is not possible with text-decoration:underline

Answer 3

You can also wrap text inside span and apply border-bottom to 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 4

use the built-in display method as the last parameter in your code, and then try adding the styles below to your CSS

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