Wie wird die Farbe und die Position von Hyperlinks unterstrichen?

Question

Gibt es eine Lösung für die Einstellung der Farbe und die vertikale Position von Hyperlinks, die alle diese Bedingungen erfüllt?

1. Werke in modernen Browsern,
2. reine CSS erfordert (ohne HTML-Elemente oder JavaScript hinzufügen),
3. auch Werke in den Fällen, wenn ein Link bricht in mehrere Zeilen (dies ist der Hauptnachteil der meisten Lösungen, die ich kenne),
4. funktioniert unabhängig davon, was display Wert der Hyperlink hat (inline, block, inline-block oder aufwendiger).

Ich habe alle Q & A durchgesehen, aber jede Lösung, die ich gefunden habe, scheitert an einem oder mehreren dieser Kriterien.

Answer 1

Um die Unterstreichung anzupassen, können Sie Ihren "a" -Elementen Rahmen hinzufügen.

a{ 
     text-decoration: none; 
     border-bottom: 1px solid #yourcolor; 
    } 

Answer 2

Ich benutze immer Pseudo-Klassen :before und :after für dieses

ich die Lösung befürchten, schlage ich vor, versagt auch die Anforderung von mehreren Leitungsverbindungen; aber du bist irgendwie vage hier. Möchten Sie, dass es einmal oder die ganze Verbindung in jeder Zeile unterstrichen wird? (Ich glaube, letzteres tut süß aussehen)

Räume Nur für diese Technik: Element muss eine andere Position als statisches Element muss entweder :before oder :after

hier beobachten: http://codepen.io/katerlouis/pen/xOWPRG

a { 
    color: blue; 
    text-decoration: none; 
    position: relative; 

    &:before { 
     transition: all 100ms ease-out; 
     content: ""; 
     position: absolute; 
     bottom: -5px; 
     left: 0; right: 0; 
     margin: auto; 
     width: 60%; height: 2px; 
     background: red; 
    } 
    &:hover:before { 
     width: 100%; 
    } 
}