Ich habe ein Element mit den folgenden CSS-Eigenschaften:
%Vor%Das Problem ist, dass die Überstreichung sehr klein und nicht sehr dick ist. Ich möchte die Dicke dieser Überschneidung erhöhen.
Ich habe etwas geforscht und es sieht so aus, als gäbe es keine CSS-Eigenschaft, um die Dicke der Überstreichung zu erhöhen.
Ich habe bestimmte Dinge über das Hinzufügen eines oberen Rands gelesen, aber dieser obere Rand sitzt nicht direkt über dem Text und bewegt das gesamte Element auf der Seite nach unten.
Da ich dies in einer Bootstrap-Navigationsleiste mache, ist das Element, das sich nach unten bewegt, ein ziemlich großes Problem.
Irgendwelche Ideen, wie man die Überstreichung sichtbarer macht und die Dicke der Linie erhöht?
Im Folgenden finden Sie den vollständigen Codeschnipsel einschließlich des HTML-Codes, den ich verwende.
Eine Methode besteht darin, den oberen Rand jederzeit mit einer transparenten Farbe einzufügen. Dies berücksichtigt die Breite, die das Element bei der Interaktion mit einer Pseudo-Klasse wie :active oder :hover stabilisiert.
Dann ändere einfach die Farbe in :active , :hover , usw. Hier ist ein Beispiel:
BEARBEITEN
Aus den Kommentaren:
Ok jetzt, wenn die Höhe des Elements größer ist, wird die Grenze immer ruhen Sie oben im div container. Gibt es trotzdem, um es auszuruhen? richtig über den Text selbst statt an der Spitze des div Container? Ähnlich wie
text-decoration: overline;funktioniert oder nicht?
Sie können die Stärke der Textdekoration nicht anpassen.
Sie können jedoch eine Überlappung ähnlich der Textdekoration simulieren, aber Sie können die Breite ändern, indem Sie ...
verwendenborder-top und die richtige Menge padding-top . Hier können Sie border-top-width wie gewünscht angeben. ::before pseudoelement, Sie können height so groß oder klein wie nötig angeben.
Sie können :after pseudo-Element verwenden, um eine Zeile anstelle von text-decoration zu erstellen, und position: absolute auf die Position :after element setzen.
Andere Option besteht darin, display: inline-flex für das Elternelement mit flex-direction: column und :before Pseudoelement zu verwenden.
Tags und Links html css twitter-bootstrap