Heim Web-Frontend CSS-Tutorial Wie passt man die Farben der Textunterstreichung mit CSS an?

Wie passt man die Farben der Textunterstreichung mit CSS an?

Nov 03, 2024 pm 08:04 PM

How to Customize Text Underline Colors with CSS?

Textunterstreichungsfarben mit CSS anpassen

Im Webdesign ist das Hinzufügen einer Unterstreichung zum Text eine gängige Praxis, um Informationen hervorzuheben oder hervorzuheben. Was aber, wenn Sie durch Ändern der Unterstreichungsfarbe eine einzigartige Note hinzufügen möchten? Ist das möglich?

Ja, es ist möglich, die Farbe der Linie unter dem Text mithilfe von CSS zu ändern. Hier sind zwei Methoden, die Sie verwenden können:

Methode 1: Verwendung von text-decoration-color

Der einfachste Ansatz ist die Verwendung der Eigenschaft text-decoration-color. Diese Eigenschaft gibt die Farbe der Unterstreichung an, sodass Sie sie unabhängig von der Textfarbe anpassen können.

Um beispielsweise roten Text mit einer blauen Unterstreichung zu erstellen, würden Sie das folgende CSS verwenden:

<code class="css">text-decoration-color: blue;</code>

Methode 2: Verwenden von border-bottom

Eine alternative Methode ist die Verwendung der Eigenschaft border-bottom. Diese Eigenschaft erstellt einen Rahmen am unteren Rand des Textes, der eine Unterstreichung simulieren kann. Durch Festlegen der Eigenschaft „border-bottom-color“ können Sie die Farbe der Unterstreichung festlegen.

So würden Sie beispielsweise mit „border-bottom“ den gleichen Effekt wie Methode 1 erzielen:

<code class="css">border-bottom: 1px solid blue;
text-decoration: none;</code>

Hinweis: Die Eigenschaft text-decoration-color wird von modernen Browsern unterstützt. Wenn Sie ältere Browser unterstützen müssen, sollten Sie aus Kompatibilitätsgründen möglicherweise die Border-Bottom-Methode verwenden.

Das obige ist der detaillierte Inhalt vonWie passt man die Farben der Textunterstreichung mit CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie VW- und VH -Einheiten in CSS So verwenden Sie VW- und VH -Einheiten in CSS Aug 07, 2025 pm 11:44 PM

VW- und VH -Einheiten erreichen reaktionsschnelles Design, indem sie Elementgrößen mit Ansichtsfenster und Höhe in Verbindung bringen. 1 VW entspricht 1% der Ansichtsfensterbreite, und 1 VH entspricht 1% der Ansichtsfensterhöhe; häufig im Vollbildbereich, reaktionsschnellen Schriftarten und elastischen Abstand verwendet; 1. Verwenden Sie im Vollbildbereich 100VH oder besser 100DVH, um den Einfluss der Mobile Browser -Adressleiste zu vermeiden. 2. Responsive Schriftarten können mit 5 VW begrenzt und mit einer Klemme (1,5REM, 3VW, 3REM) in Kombination der minimalen und maximalen Größe begrenzt werden. 3. Elastischer Abstand wie Breite: 80VW, Rand: 5VHAUTO, Polsterung: 2VH3VW, kann das Layout anpassungsfähig machen; Achten Sie auf Kompatibilität, Zugänglichkeit und Inhaltskonflikte für mobile Geräte. Es wird empfohlen, zuerst DVH zu verwenden.

So erstellen Sie eine vertikale Linie mit CSS So erstellen Sie eine vertikale Linie mit CSS Aug 11, 2025 pm 12:49 PM

Verwenden Sie einen DIV mit Rand, um schnell vertikale Linien zu erstellen und Stile und Höhen zu definieren, indem Sie randlinks und Höhe einstellen. 2. Verwendung :: vor oder :: Nach Pseudoelementen, um vertikale Linien ohne zusätzliche HTML-Tags hinzuzufügen, die für die dekorative Trennung geeignet sind; 3. In Flexbox -Layout können adaptive vertikale Trennwände zwischen elastischen Behältern erreicht werden, indem die Breite und die Hintergrundfarbe der Trennklasse festgelegt werden. 4. Fügen Sie in CSSGrid vertikale Linien als unabhängige Spalten (z. B. Autowidth -Spalten) in das Gitterlayout ein, das für reaktionsschnelles Design geeignet ist. Die am besten geeignete Methode sollte gemäß dem spezifischen Layout ausgewählt werden, um sicherzustellen, dass die Struktur einfach und leicht zu warten ist.

So verwenden Sie die Filtereigenschaft in CSS So verwenden Sie die Filtereigenschaft in CSS Aug 11, 2025 pm 05:29 PM

ThecssFilterPropertyAllowsvisualeffects-ähnlich, Helligkeit und GryscaletobeAppliedDirecttoHtmlelements.1) Usethesyntaxfilter: Filterfunktion (Wert) toappyeffects.2) Kombination

Was sind CSS-Pseudoklassen und wie man sie benutzt? Was sind CSS-Pseudoklassen und wie man sie benutzt? Aug 06, 2025 pm 01:06 PM

Die CSS-Pseudo-Klasse ist ein Schlüsselwort, mit dem der spezielle Zustand eines Elements definiert wird. Es kann dynamisch Stile anwenden, basierend auf Benutzerinteraktion oder Dokumentenort. 1.: Hover wird ausgelöst, wenn die Maus schwebt, z. B. die Taste: HOVER ändert die Knopffarbe. 2.: Fokus wirkt sich in Wirksamkeit, wenn das Element den Fokus erhält und die Zugänglichkeit verbessert. 3.: nt-child () wählt Elemente nach Position aus und unterstützt ungerade, sogar oder Formeln wie 2n 1; 4.: Erstkind und: Last-Kind Wählen Sie die ersten bzw. letzten Kinderelemente aus; 5.:Not () schließt Elemente aus, die den angegebenen Bedingungen entsprechen; 6.: Besuchen und: Link -Set -Stile basierend auf dem Linkzugriffsstatus, aber: Besucht wird durch Privatsphäre eingeschränkt.

So erstellen Sie eine gepunktete Grenze in CSS So erstellen Sie eine gepunktete Grenze in CSS Aug 15, 2025 am 04:56 AM

Verwenden Sie CSS, um gepunktete Grenzen zu erstellen, und stellen Sie einfach das Grenzattribut auf gepunktete fest. Zum Beispiel kann "Border: 3PXDotted#000" dem Element einen 3-Pixel-schwarzen Punktrand hinzufügen. Durch die Einstellung der Randbreite kann die Größe des Punktes geändert werden. Die breiteren Grenzen erzeugen größere Punkte. Sie können gepunktete Grenzen für eine bestimmte Seite festlegen, z. B. "Border-Top: 2PXDottedRed". Gepunktete Grenzen eignen sich für Elemente auf Blockebene wie Div und Eingabe. Sie werden häufig in Fokuszuständen oder bearbeitbaren Bereichen verwendet, um die Zugänglichkeit zu verbessern. Achten Sie auf Farbkontrast. Gleichzeitig präsentiert Dotted eine kreisförmige Punktform. Diese Funktion wird in allen Mainstream -Browsern häufig verwendet.

Wie man einen GlaSmorphismus -Effekt mit CSS erzeugt Wie man einen GlaSmorphismus -Effekt mit CSS erzeugt Aug 22, 2025 am 07:54 AM

Um einen Gla-Mimikry-Effekt von CSS zu erzeugen, müssen Sie Backdrop-Filter verwenden, um Hintergrundunschärfe zu erzielen, einen durchscheinenden Hintergrund wie RGBA (255,255,255,0.1) festzulegen, subtile Grenzen und Schatten hinzuzufügen, um das Gefühl der Hierarchie zu verbessern, und sicherzustellen, dass der visuelle Inhalt hinter den Elementen genügend visuelle Inhalt gibt. 1. Verwenden Sie Backdrop-Filter: Blur (10px), um den Hintergrundinhalt zu verwischen; 2. Verwenden Sie RGBA oder HSLA, um den transparenten Hintergrund zu definieren, um den Grad der Transparenz zu steuern. 3. Fügen Sie 1pxsolidrgba (255.255.255,0,3) Grenzen und Box-Shadow hinzu, um die dreidimensionale zu verbessern. V. 5. Es ist mit alten Browsern kompatibel

So ändern Sie den Listenstil in CSS So ändern Sie den Listenstil in CSS Aug 17, 2025 am 10:04 AM

Um den CSS-Listenstil zu ändern, verwenden Sie zunächst den Typ Listenstil, um die Kugel- oder Nummerierungsstil zu ändern. 1. Verwenden Sie den Typ Listenstil, um die Kugel von UL auf Scheibe, Kreis oder Quadrat einzustellen, und die Anzahl der OL ist dezimal, unter-alpha, obere Alpha, untere Röme oder Oberroman. 2. Entfernen Sie das Tag vollständig mit Listenstil: Keine. 3. Verwenden Sie das Listen-Stil: URL ('bullet.png'), um es durch ein benutzerdefiniertes Bild zu ersetzen. 4. Verwenden Sie Listen-Stil-Positionen: in

Wie benutze ich CSS Clamp () für reaktionsschnelle Typografie? Wie benutze ich CSS Clamp () für reaktionsschnelle Typografie? Aug 06, 2025 pm 04:51 PM

clamp () incssenablesfluid, ResponsivetypographyBysettingAvaluebetweenaminimum, bevorzugt und maximumsize; 1.Usclamp (min, bevorzugt, max)

See all articles