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.
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
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:
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
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.
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%,#22222281.1%,#22222285%,
rgba(0,0,0,0)85.1%,
rgba(0,0,0,0));text-decoration: none;}
<ahref="#">Lorem ipsum</a> dolor sit amet, <ahref="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <ahref="#">invidunt ut labore.</a>
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.
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.
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:
Ändern Sie die contentin etwas die richtige Länge (dh die gleiche
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:
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.
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:0px0px1px0px;transition: all .2s ease-in;}a:hover{color:darkblue;border-style:solid;border-width:0px0px1px0px;padding:2px;}
<ahref='#'>Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><ahref="#">what a wonder-ful world!</a> World!</i>
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.
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.
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
text-underline-position: under;
undtext-decoration-skip: ink;
Bitte beachten Sie, dass dies wahrscheinlich nicht abwärtskompatibel mit älteren Browsern ist.text-underline-offset
hier: bugs.chromium.org/p/chromium/issues/...Antworten:
Nein, aber du könntest mit so etwas wie
border-bottom: 1px solid #000
und gehenpadding-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: 1px
undborder-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ügenborder-bottom
undpadding
auf die<span>
- Demoquelle
<a href="#"><span>insert multiline texts here</span></a>
dann einfach Rand-Boden und Polsterung auf dem<span>
. jsfiddle.net/Aishaterr/vrpb2ey7/1Update 2019: Die CSS-Arbeitsgruppe hat einen Entwurf für die Textdekorationsstufe 4 veröffentlicht, der eine neue Eigenschaft
text-underline-offset
(sowietext-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-bottom
ist direkt , dass auch mitpadding-bottom: 0
dem 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
:after
Pseudoelements:Durch Ändern der
bottom
Eigenschaft (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.
quelle
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 .
quelle
Hier ist, was für mich gut funktioniert.
quelle
text-underline-position
unter Firefox nicht gemäß developer.mozilla.org/en-US/docs/Web/CSS/…Es
text-decoration:underline
ist ziemlich sinnlos, sich mit den Details des visuellen Stils von zu befassen. Sie müssen also dietext-decoration:underline
Entfernungen 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:
Hier ist eine Version mit allen proprietären Eigenschaften für eine gewisse Abwärtskompatibilität:
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 ...
dann benutze es so:
Update 2: Abstiegstipp
Wenn Sie eine feste Hintergrundfarbe haben, versuchen Sie, eine dünne
text-stroke
odertext-shadow
dieselbe 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.
quelle
Ich weiß, dass es eine alte Frage ist, aber für die Einstellung von einzeiligem Text
display: inline-block
und die anschließende Einstellung vonheight
hat es gut funktioniert, den Abstand zwischen einem Rand und dem Text zu kontrollieren.quelle
@ 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:
Ändern Sie die
content
in etwas die richtige Länge (dh die gleicheText) setzen Sie die Schriftfarbe auf
transparent
(oderrgba(0,0,0,0)
)Um
<h2>Processing</h2>
(zum Beispiel) zu unterstreichen , ändern Sie den Code des letzten Kindes wie folgt:quelle
display: inline-block
würde es beheben. Das Ersetzen des Textes durchcontent
sieht aus wie ein Hack, der auf viele Arten brechen kann.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:
quelle
Als Alternative für mehrzeilige Texte oder Links können Sie Ihre Texte in einem Bereich innerhalb eines Blockelements einschließen.
dann können Sie einfach Rand unten und Polsterung auf dem hinzufügen
<span>
.Sie können sich auf diese Geige beziehen. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/
quelle
Falls Sie es wollen:
Unterstreichen Sie, Sie können 1 Pixel Höhe Hintergrundbild mit
repeat-x
und100% 100%
Position verwenden:Sie können die zweite
100%
durch etwas anderes ersetzenpx
oderem
die vertikale Position der Unterstreichung anpassen. Sie können auch verwenden,calc
wenn Sie vertikale Polster hinzufügen möchten, z.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
quelle
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
quelle
Ich konnte es mit dem U (Underline Tag) machen.
quelle
Das benutze ich:
html:
CSS:
quelle
Was ich benutze:
quelle