Border unten auf Anker Tags, die auf mehrere Zeilen und mit Inline-Block/Block-Display funktioniert

Question

Ich habe einige Anker-Tags über meine Website, die ich brauche eine "benutzerdefinierte" Unterstreichung nach dem Design.

Das Problem besteht darin, dass der untere Rand nur für die untere Zeile/den unteren Rand des Ankers gilt, wenn der Linktext in mehrere Zeilen unterteilt wird. Ich kann das lösen, indem ich den Ankerlinks eine Anzeige von Inline gebe, aber dann verliere ich die Fähigkeit, ihnen einen Rand oben zu geben.

Gibt es eine Möglichkeit, wie ich Links eine Unterstreichung von 2px geben kann und über mehrere Zeilen funktioniert, während ich ihnen auch einen Rand oben geben kann?

Beispiel Geige:

https://jsfiddle.net/mjxfzrwk/

-Code nur für den Fall:

.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

Sie innen span und anwenden border-bottom wickeln kann zu überspannen kann :before Element pseudo wie unten erfolgen verwenden . Updated fiddle

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

Answer 2

Gut für Farbe können Sie diese verwenden

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

Aber der Abstand Ding kann nicht mit text-decoration:underline

Answer 3

Sie auch Ihren Text

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

bedienbares Display Inline-Methode als letzte Option in Ihrem Code und versuchen dann

unten Arten in Ihrem CSS Hinzufügen

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