Wie ändere ich die Unterstreichungsstärke eines a-Tags, ohne die Umrandung zu verwenden?

Ich benutze oft a-Tags für Buttons, also haben sie eine Füllung, die sie wie Buttons macht.Wie ändere ich die Unterstreichungsstärke eines a-Tags, ohne die Umrandung zu verwenden?

Wie ändere ich die Dicke der Text-Dekoration unterstreichen? Leute empfehlen oft, einen Rand-Boden dafür zu verwenden, aber

Ein unterer Rand ist etwas anderes als das Unterstreichen, einige Buchstaben erstrecken sich sogar unter einer Unterstreichung. Das Unterstreichen ist viel ausgefeilter als eine Zeile unter etwas.

Ich verwende bereits die Polsterung der fraglichen Elemente wie erklärt.

Ich habe versucht, einen a:hover:after Selektor zu verwenden, um tatsächlich einen Grenz-Boden sowieso zu haben. Es scheint, als ob CSS mir nicht viele Alternativen wie Text-Dekoration-Unterstreichung-Höhe oder etwas Ähnliches gibt.

Ich werde dann in irgendeiner Weise die Höhe dieses Pseudo-Elements ändern, um die Unterstreichung zu emulieren, ohne einen Zentimeter Abstand vom Text zur "Unterstreichung" zu haben.

Es sieht nicht so aus, als würde das: After-Pseudo-Tag mit diesem CSS-Selector erstellt. Manche haben es geschafft, aber ich nicht. Also gibt es nichts, um den hasserfüllten Grenzboden zu erschaffen.

Wie gehe ich vor? Wird eine korrekte Art des Stylens Stilunterstreichung zu CSS hinzugefügt werden?

Bis dahin, wie Text mit einer Linie der gewünschten Dicke zu unterstreichen?

Quelle

2015-12-02 Anders Lindén

Es ist nicht möglich, ohne Rand oder fälschen die Unterstreichung. – APAD1

Laut [this] (http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/#line-position) definiert _CSS nicht die Dicke von Liniendekorationen. Bei der Bestimmung der Dicke von Textdekorationslinien können Benutzerprogramme die Schriftgrößen, -gesichter und -gewichte von Nachkommen berücksichtigen, um eine angemessen gemittelte Dicke zu erhalten. –

Ich habe gesehen, dass Leute einen Hintergrundgradienten verwenden – Kerstomaat

Sie tun dies die :after pseudo selector verwenden könnte. Einer der Gründe, die Sie dafür angeführt haben, dass Sie die Unterstreichung nicht vortäuschen wollten, war, dass Sie Unterlängen unterhalb der Unterstreichung haben wollten. Nun, Sie könnten nur eine negative Marge auf dem gefälschten Unterstrichen verwenden das zu erreichen (man beachte, wie das Abseilgerät der p überlappt den Unterstrich):

a { 
 
    display:inline-block; 
 
    text-decoration:none; 
 
    color:red; 
 
} 
 
    a:hover { 
 
    color:blue; 
 
    } 
 
    a:hover:after { 
 
     background:red; 
 
    } 
 
    a:after { 
 
    display:block; 
 
    content:''; 
 
    width:100%; 
 
    height:4px; 
 
    background:blue; 
 
    margin-top:-2px; 
 
    }

<a href="#">Sample link with descender</a>

Quelle

2015-12-02 16:25:16 APAD1

könnte es wert sein, sie mit Hover zu zeigen. a: Hover: nach {Hintergrund: gelb;} –

@AndrewBone danke für den Vorschlag, hinzugefügt. – APAD1

Indem ich nur die Hintergrundfarbe in der a: hover: after-Regel und der margin-top-Einstellung festlege (ohne die Farbe des a-Tags zu ändern) bekomme ich eine Unterstreichung, die so nahe am Text ist, wie ich möchte. Es ist auch gut, dass die Unterstreichung in z-Richtung unter den Text geht. –

Sie in Erwägung ziehen könnte eine box-shadow, wie dies mit:

a 
 
{ 
 
    box-shadow: 0 5px 0 rgba(0,0,100, 0.5); 
 
    text-decoration: none; 
 
    padding-bottom: 5px; 
 
}

<a href="#">My super link</a>

/* offset-x | offset-y | color */ 
box-shadow: 60px -16px teal;

Definition siehe: https://developer.mozilla.org/en/docs/Web/CSS/box-shadow

Der Nachteil dieser Lösung ist, dass der Umriss ist nicht klickbar.

Um dies zu überwinden, kann man so etwas tun:

a 
 
{ 
 
    box-shadow: 0 -5px rgba(0,0,100, 0.5) inset; 
 
    text-decoration: none; 
 
    padding-bottom: 10px; 
 
}

<a href="#">Totally clickable</a>

Quelle

2015-12-02 16:17:10

Warum Box-Schatten ist besser als eine einfache Grenze? Ich verstehe nicht, welche Verbesserung ist das –

@ MarcosPérezGude um ehrlich zu sein, ich missverstand die Frage, die ich denke. Ich dachte, das Problem wäre, dass die Grenze den folgenden Inhalt nach unten drückt. Ich habe eine Geige erstellt: https://jsfiddle.net/0krvtee3/, die zeigt, dass der Rand von Inline-Elementen sich anders verhält als expreted. Also ist mein "Vorteil" einer Show weniger störend für folgendes Element und Ihr Punkt ist gültig. Danke für die Köpfe hoch. Ein kleiner Vorteil bleibt: Sie können die Position des Schattens ändern, ohne sich mit Paddings auseinandersetzen zu müssen (mit Ausnahme der all-klickbaren Lösung) –

ist nicht Ihr Schuldiger. OP bittet um eine einfache Sache, dass die richtige Antwort sein sollte: * "Standard-Unterstreichung wird vom Browser abhängig von der Typografie gerendert. Die anderen Techniken sind die gleichen und das ist keine Unterstreichung semantisch korrekt" *. Deine Technik ist also gut, egal. –

Ich versuchte APAD1 Methode verwenden zu erstellen eine Unterstreichung und ich verbrachte mindestens 20 Minuten damit zu denken, dass etwas nicht stimmte mit dem, wie ich es tat. Ich konnte es auf FireFox überhaupt nicht zur Arbeit bringen, also kam ich auf diese Methode, die für diejenigen, die Schwierigkeiten haben könnten, wie ein Zauber wirkte.

a{ 
 
    \t display:inline-block; 
 
    \t color:red; 
 
    \t text-decoration:none; 
 
    \t border-bottom:4px solid blue; 
 
    } 
 
    a:hover{ 
 
    \t color:blue; 
 
    \t text-decoration:none; 
 
    \t border-bottom:4px solid red; 
 
    }

<a href="#">Sample underline</a>

Sie auch die padding-bottom-Eigenschaft verwenden, kann die Grenze aus dem Text zu distanzieren. Sie können es jedoch nicht näher heranziehen, was ich für kein Problem halten sollte, da Sie es nicht zu nah haben wollen.

Quelle

2017-02-16 22:23:15 Jester

Wie ändere ich die Unterstreichungsstärke eines a-Tags, ohne die Umrandung zu verwenden?

Antwort

Verwandte Themen