Wie man die Lücke zwischen Text und Unterstreichung in CSS vergrößert

Wenn Text mit CSS text-decoration:underline angewendet, ist es möglich, den Abstand zwischen dem Text und der Unterstreichung zu erhöhen?

    Nein, aber du könntest mit etwas wie border-bottom: 1px solid #000 und padding-bottom: 3px .

    Wenn Sie die gleiche Farbe der “Unterstreichung” möchten (was in meinem Beispiel eine Umrandung ist), lassen Sie einfach die border-bottom-width: 1px , dh border-bottom-width: 1px und border-bottom-style: solid .

    Bei Multilinien können Sie mehrzeilige Texte in einem Bereich innerhalb des Elements umbrechen. ZB insert multiline texts here und fügen Sie dann einfach den Rahmen und das padding in das – Demo ein

    Das Problem mit der Verwendung von border-bottom ist, dass selbst mit padding-bottom: 0 die Unterstreichung zu weit vom Text entfernt ist, um gut auszusehen. Wir haben also immer noch keine vollständige Kontrolle.

    Eine Lösung, die Ihnen Pixelgenauigkeit gibt, ist die Verwendung des :after Pseudo-Elements:

     a { text-decoration: none; position: relative; } a:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; } 

    Durch Ändern der bottom Eigenschaft (negative Zahlen sind in Ordnung) können Sie die Unterstreichung genau dort positionieren, wo Sie sie haben möchten.

    Ein Problem bei dieser Technik ist, dass es sich bei Zeilenumbrüchen etwas seltsam verhält.

    Sie können diese text-underline-position: under

    Sehen Sie hier für weitere Details: https://css-tricks.com/almanac/properties/t/text-underline-position/

    Siehe auch Browserkompatibilität .

    In die Details des visuellen Stils der text-decoration:underline ist ziemlich nutzlos, also wirst du mit einer Art von Hack gehen müssen, der die text-decoration:underline und ersetze sie durch etwas anderes bis zu einem magischen Weitwinkel Die zukünftige Version von CSS gibt uns mehr Kontrolle.

    Das hat für mich funktioniert:

     a { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) 81%, #222222 81.1%, #222222 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) ); text-decoration: none; } 
    • Passen Sie die% -Werte (81% und 85%) an, um zu ändern, wie weit die Linie vom Text entfernt ist
    • Passen Sie den Unterschied zwischen den beiden% -Werten an, um die Linienstärke zu ändern
    • Passen Sie die Farbwerte (# 222222) an, um die Unterstreichfarbe zu ändern
    • arbeitet mit mehrzeiligen Inline-Elementen
    • funktioniert mit jedem Hintergrund

    Hier ist eine Version mit allen proprietären Eigenschaften für einige Abwärtskompatibilität:

     a { /* This code generated from: http://colorzilla.com/gradient-editor/ */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */ text-decoration: none; } 

    Update: SASSY Version

    Ich habe dafür ein Scss-Mix gemacht. Wenn Sie nicht SASS verwenden, funktioniert die reguläre Version oben immer noch gut …

     @mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) $top, $color $top + 0.1%, $color $bottom, rgba(0,0,0,0) $bottom + 0.1%, rgba(0,0,0,0) ); text-decoration: none; } 

    dann benutze es so:

     $blue = #0054a6; a { color: $blue; @include fake-underline(lighten($blue,20%)); } a.thick { color: $blue; @include fake-underline(lighten($blue,40%), 86%, 99%); } 

    Update 2: Unterlängen Tipp

    Wenn Sie über eine solide Hintergrundfarbe verfügen, sollten Sie einen dünnen text-stroke oder text-shadow in der gleichen Farbe wie den Hintergrund hinzufügen, damit die Unterlängen gut aussehen.

    Kredit

    Dies ist eine vereinfachte Version der Technik, die ich ursprünglich unter https://eager.io/app/smartunderline gefunden habe , aber der Artikel wurde seitdem entfernt.

    Ich weiß, es ist eine alte Frage, aber für die display: inline-block Einzeiler-Text display: inline-block und dann die Einstellung der height hat mir gut funktioniert, um den Abstand zwischen einer Grenze und dem Text zu steuern.

    @ Last-Child-Antwort ist eine gute Antwort!

    Das Hinzufügen eines Rahmens zu meinem H2 erzeugte jedoch eine längere Unterstreichung als der Text.

    Wenn Sie Ihr CSS dynamisch schreiben oder wenn Sie wie ich Glück haben und wissen, was der Text sein wird, können Sie Folgendes tun:

    1. Ändere den content auf etwas die richtige Länge (dh das gleiche

    2. Text) setze die Schriftfarbe auf transparent (oder rgba(0,0,0,0) )

    Um

    Processing

    zu unterstreichen, ändern Sie den Code des letzten Kindes wie folgt:

     a { text-decoration: none; position: relative; } a:after { content: 'Processing'; color: transparent; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; } 

    Sieh meine Geige .

    Sie müssten die Eigenschaft border width und die Eigenschaft padding verwenden. Ich habe Animationen hinzugefügt, damit es cooler aussieht:

     body{ background-color:lightgreen; } a{ text-decoration:none; color:green; border-style:solid; border-width: 0px 0px 1px 0px; transition: all .2s ease-in; } a:hover{ color:darkblue; border-style:solid; border-width: 0px 0px 1px 0px; padding:2px; } 
     Somewhere ... over the rainbow (lalala) , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a what a wonder-ful world! World! 

    Als Alternative für mehrzeilige Texte oder Links können Sie Ihre Texte in einem Bereich innerhalb eines Blockelements umbrechen.

      insert multiline texts here  

    Dann können Sie einfach den Rand und den Abstand zum hinzufügen.

     a { width: 300px; display: block; } span { padding-bottom: 10px; border-bottom: 1px solid #0099d3; line-height: 48px; } 

    Sie können sich auf diese Geige beziehen. https://jsfiddle.net/Aishachterr/vrpb2ey7/2/

    Wenn du willst:

    • mehrzeilig
    • punktiert
    • mit benutzerdefinierten Bodenpolsterung
    • ohne Umhüllungen

    Unterstreichen können Sie 1 Pixel Höhe Hintergrundbild mit repeat-x und 100% 100% Position verwenden:

     display: inline; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%; 

    Sie können die zweiten 100% durch etwas anderes wie px oder em ersetzen, um die vertikale Position der Unterstreichung anzupassen. Sie können auch calc wenn Sie ein vertikales Padding hinzufügen möchten, zB:

     padding-bottom: 5px; background-position-y: calc(100% - 5px); 

    Natürlich können Sie auch Ihr eigenes base64 png Muster mit einer anderen Farbe, Höhe und Design erstellen, zB hier: http://www.patternify.com/ – setzen Sie einfach die Quadratbreite und -höhe auf 2×1.

    Quelle der Inspiration: http://alistapart.com/article/customunderlines

    Ich konnte es mit dem U (Underline Tag) tun

     u { text-decoration: none; position: relative; } u:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; }  
    Shop Now

    Das ist was ich benutze:

    html:

     
    GET IN TOUCH

    CSS:

     .horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }