So vergrößern Sie die Lücke zwischen Text und Unterstreichung in CSS

306

Ist es mit CSS text-decoration:underlinemöglich, den Abstand zwischen Text und Unterstreichung zu vergrößern , wenn Text angewendet wurde?

css  underline 
— maxp
quelle
1
Dies ist nicht genau das, wonach Sie gefragt haben, aber es war eine interessante Lektüre zu diesem Thema: CSS-Design: Benutzerdefinierte Unterstreichungen
— Peter Rowell
Der Abstand wird durch eine verwendete Schriftart bestimmt. Probieren Sie web-sichere Schriftarten aus.
— Alexei Danchenkov
1
CSS3 hat heutzutage viele neue Eigenschaften für die Textdekoration. Bitte überprüfen Sie alligator.io/css/text-decoration Beispiel: text-underline-position: under;und text-decoration-skip: ink;Bitte beachten Sie, dass dies wahrscheinlich nicht abwärtskompatibel mit älteren Browsern ist.
— Chocolata
1
Eine weitere gute Lösung
— w3spi
1
Stimmen Sie für die text-underline-offsethier: bugs.chromium.org/p/chromium/issues/...
— Mark Fisher

Antworten:

356

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

Wenn Sie die gleiche Farbe wie die "Unterstreichung" (in meinem Beispiel ein Rand) wünschen, lassen Sie einfach die Farbdeklaration weg, dh border-bottom-width: 1pxund border-bottom-style: solid.

Bei mehrzeiligen Texten können Sie mehrzeilige Texte in einen Bereich innerhalb des Elements einschließen. ZB <a href="#"><span>insert multiline texts here</span></a>dann einfach hinzufügen border-bottomund paddingauf die <span>- Demo

— Chelmertz
quelle
3
Mein einziges Problem mit diesem Trick ist, wenn ich die Zeilenhöhe gleich der Div-Höhe verwende und dann vertikal ausrichte: Mitte; Um es zu zentrieren, kann ich diesen Trick nicht verwenden, da dann die Unterstreichung unter dem Div endet.
— Deweydb
@deweydb: Wie wäre es, wenn Sie den Container-Boden auch zum Container-Div hinzufügen? jsfiddle.net/dYfjc/1
— Chelmertz
+1 Ich wusste nicht, dass ich die Farbeigenschaft weglassen sollte, um die Farbe der Schrift zu erben - das spart in Zukunft viel Schweiß und Tränen!
— Larry
9
Ich bin mir ziemlich nicht sicher, warum diese Antwort so viele positive Stimmen hat. Dies funktioniert bei mehrzeiligen Texten nicht vollständig.
3
Bei mehrzeiligen Texten können Sie mehrzeilige Texte in einen Bereich innerhalb des Elements einschließen. ZB <a href="#"><span>insert multiline texts here</span></a>dann einfach Rand-Boden und Polsterung auf dem <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
— Daniel Hernandez
133

Update 2019: Die CSS-Arbeitsgruppe hat einen Entwurf für die Textdekorationsstufe 4 veröffentlicht, der eine neue Eigenschaft text-underline-offset(sowie text-decoration-thickness) hinzufügt , um die genaue Platzierung einer Unterstreichung zu steuern. Zum jetzigen Zeitpunkt handelt es sich um einen Entwurf im Frühstadium, der von keinem Browser implementiert wurde. Es sieht jedoch so aus, als würde die unten stehende Technik irgendwann veraltet sein.

Ursprüngliche Antwort unten.

Das Problem bei der Verwendung border-bottomist direkt , dass auch mit padding-bottom: 0dem Unterstrich zu weit zu sein scheint weg zu gut aussehen aus dem Text. Wir haben also immer noch keine vollständige Kontrolle.

Eine Lösung, die Ihnen Pixelgenauigkeit bietet, ist die Verwendung des :afterPseudoelements:

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 bottomEigenschaft (negative Zahlen sind in Ordnung) können Sie die Unterstreichung genau dort positionieren, wo Sie sie möchten.

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

— letztes Kind
quelle
2
Dies wird für mein spezielles Problem nicht funktionieren, aber dies ist ein fantastischer Trick. +1
11
Gute Arbeit, aber dies funktioniert nicht für Anker, die mehrere Linien überspannen
— Willster
@ last-child Dies ist besser als unterstreichen, aber mit
— Textumbruch
Ein Problem ist, dass ein Randboden und eine Unterstreichung zwei verschiedene Dinge sind. Zum Beispiel sollte sich ein Teil des Textes unterhalb der Unterstreichung erstrecken. Wenn Sie a-Tags als Schaltflächen formatieren, können Sie den unteren Rand nicht als Unterstreichung verwenden.
— Anders Lindén
10
Stellen Sie sich vor, Sie sagen jemandem, der entweder neu in der Webentwicklung ist, einem Grafikdesigner, einem durchschnittlichen Benutzer oder Ihrer Mutter, dass dies erforderlich ist, um einen kontrollierten Abstand zwischen Text und Unterstreichung hinzuzufügen, und er wird sich fragen, was Sie mit Ihrem Leben anfangen .
— MarcGuay
79

Sie können dies verwenden text-underline-position: under

Weitere Informationen finden Sie hier: https://css-tricks.com/almanac/properties/t/text-underline-position/

Siehe auch Browserkompatibilität .

— Duc Huynh
quelle
2
Vielen Dank! Wenn Sie versuchen, eine gestrichelte Unterstreichung zu erstellen und feststellen, dass sie ohne Leerzeichen zwischen dem unteren Rand des Textes und der Linie gezeichnet wird, wird das Problem dadurch behoben.
— Jonathan Cross
6
Dies ist die richtige Antwort für moderne Browser ohne Problemumgehung.
— Paras Shah
2
Es funktioniert nicht in Firefox, auch nicht mit Herstellerpräfix - aber es ist in einer W3C-Spezifikation: w3.org/TR/css-text-decor-3/#text-underline-position-property . Andere relevante Ressource: quackit.com/css/css3/properties/css_text-underline-position.cfm
— rosell.dk
4
Ab diesem Moment funktioniert dies nur im Chrome-Browser und ist keine Lösung für andere Browser.
— Miir
2
Nun, zum Datum dieses Kommentars sehe ich, dass dies auch in Firefox funktioniert .
— Jarad
15

Hier ist, was für mich gut funktioniert. 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
Erweitern Sie das Snippet

— Jordan Starrk
quelle
2
Es ist wichtig zu beachten, dass text-underline-positionunter Firefox nicht gemäß developer.mozilla.org/en-US/docs/Web/CSS/…
— Floran Gmehlin
Sehr interessant. Toller Hinweis. Danke dir!
— Jordan Starrk
Wird in Firefox ab 74 gemäß demselben Link unterstützt.
— GSerg
11

Es text-decoration:underlineist ziemlich sinnlos, sich mit den Details des visuellen Stils von zu befassen. Sie müssen also die text-decoration:underlineEntfernungen hacken und durch etwas anderes ersetzen, bis eine magische, weit entfernte zukünftige Version von CSS uns mehr Kontrolle gibt .

Das hat bei mir 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;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
Erweitern Sie das Snippet

  • Passen Sie die% -Werte (81% und 85%) an, um zu ändern, wie weit die Zeile vom Text entfernt ist
  • Passen Sie die Differenz zwischen den beiden% -Werten an, um die Linienstärke zu ändern
  • Passen Sie die Farbwerte (# 222222) an, um die Unterstreichungsfarbe zu ändern
  • funktioniert mit mehrzeiligen Inline-Elementen
  • funktioniert mit jedem Hintergrund

Hier ist eine Version mit allen proprietären Eigenschaften für eine gewisse 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 ein SCSS-Mixin dafür gemacht. Wenn Sie SASS nicht verwenden, funktioniert die reguläre Version oben immer noch hervorragend ...

@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: Abstiegstipp

Wenn Sie eine feste Hintergrundfarbe haben, versuchen Sie, eine dünne text-strokeoder text-shadowdieselbe Farbe wie Ihr Hintergrund hinzuzufügen , damit die Abseilgeräte gut aussehen.

Anerkennung

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

— squarecandy
quelle
Leider funktioniert der Link eifrig.io nicht mehr. Erinnerst du dich, was der Hack war, um Nachkommen schöner aussehen zu lassen?
— Kano
1
@Kano - Ich glaube, es wurde Textschatten in der gleichen Farbe wie ein fester Hintergrund verwendet.
— Squarecandy
Mit der obigen Technik können Sie auch die Farbe der Unterstreichung anders als im Text einstellen. Manchmal stelle ich sie heller als den Text ein, wodurch Kollisionen mit den Abseilern für die Lesbarkeit weniger problematisch werden.
— Squarecandy
7

Ich weiß, dass es eine alte Frage ist, aber für die Einstellung von einzeiligem Text display: inline-blockund die anschließende Einstellung von heighthat es gut funktioniert, den Abstand zwischen einem Rand und dem Text zu kontrollieren.

— Dominic P.
quelle
1
Ich musste die Höhe nicht einstellen. Ich habe es einfach in ein anderes Div eingewickelt und da ich wollte, dass es zentriert wird, habe ich einfach die Textausrichtung auf das Out-Div gesetzt.
— Guy Lowe
6

@ Die Antwort des letzten Kindes ist eine großartige Antwort!

Das Hinzufügen eines Rahmens zu meinem H2 führte jedoch zu einer längeren Unterstreichung als der Text.

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

  1. Ändern Sie die contentin etwas die richtige Länge (dh die gleiche

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

Um <h2>Processing</h2>(zum Beispiel) 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;
}
— Michael Greisman
quelle
9
H2s sind Blockelemente, die möglicherweise erklären, warum die Unterstreichung länger als der Text war. Vielleicht display: inline-blockwürde es beheben. Das Ersetzen des Textes durch contentsieht aus wie ein Hack, der auf viele Arten brechen kann.
— letztes Kind
3

Sehen Sie meine Geige .

Sie müssten die Eigenschaft border width und die Eigenschaft padding verwenden. Ich habe einige 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;
}
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>
Erweitern Sie das Snippet

— Sternenstaub
quelle
2

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

<a href="#">
    <span>insert multiline texts here</span>
</a>

dann können Sie einfach Rand unten und Polsterung auf dem hinzufügen <span>.

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/Aishaterr/vrpb2ey7/2/

— Daniel Hernandez
quelle
2

Falls Sie es wollen:

  • mehrzeilig
  • gepunktet
  • mit kundenspezifischer Bodenpolsterung
  • ohne Wrapper

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

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

Sie können die zweite 100%durch etwas anderes ersetzen pxoder emdie vertikale Position der Unterstreichung anpassen. Sie können auch verwenden, calcwenn Sie vertikale Polster hinzufügen möchten, z.

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 einem anderen Design erstellen, z. B. hier: http://www.patternify.com/ - stellen Sie einfach die quadratische Breite und Höhe auf 2x1 ein.

Inspirationsquelle: http://alistapart.com/article/customunderlines

— mcmimik
quelle
1

Wenn Sie verwenden text-decoration: underline;, können Sie mithilfe von Leerzeichen zwischen Unterstreichung und Text hinzufügentext-underline-position: under;

Weitere Informationen zu den Eigenschaften der Text-Unterstreichungsposition finden Sie hier

— Ifrah
quelle
0

Ich konnte es mit dem U (Underline Tag) machen.

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;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>
— Arun Prasad ES
quelle
0

Das benutze ich:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

CSS:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
— Constantinos Constantinou
quelle
0

Was ich benutze:

<span style="border-bottom: 1px solid black"> Enter text here </span>
— Francis Acosta
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.