Bordo inferiore su tag di ancoraggio, che funziona su più righe e con visualizzazione blocco/blocco in linea

Question

Ho alcuni tag di ancoraggio sul mio sito che ho bisogno di avere una sottolineatura 'personalizzata' in base al progetto.

Il problema è che quando il testo del collegamento si interrompe su più linee il bordo inferiore si applica solo alla linea di fondo/fondo di ancoraggio. Posso risolvere questo problema fornendo ai link di ancoraggio una visualizzazione di inline, ma poi perdo la possibilità di dare loro un margine superiore.

C'è un modo per dare ai collegamenti una sottolineatura di 2px e funziona su più righe pur essendo in grado di dare loro un margine superiore?

Esempio violino:

https://jsfiddle.net/mjxfzrwk/

Codice solo in caso:

.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

È possibile utilizzare :before pseudo elemento come qui di seguito . Updated fiddle

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

Answer 2

Bene per colore che si può usare questo

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

Ma la cosa distanza non può essere fatto con text-decoration:underline

Answer 3

Si può anche avvolgere il testo all'interno span e applicare border-bottom estendersi

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

uso metodo di visualizzazione in linea come l'ultima opzione nel codice e quindi provare l'aggiunta di seguito stili nel vostro css

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