CSS-Text durchgestrichen

Durchgestrichener CSS-Text ist ein üblicher Textstileffekt. Sie können dem Text eine horizontale Linie hinzufügen, um anzuzeigen, dass der Text gelöscht oder kommentiert wurde.

Im Webdesign wird CSS-Textdurchgestrichen häufig in einigen Blogbeiträgen verwendet, um anzuzeigen, dass der Autor den ursprünglichen Textinhalt geändert oder gelöscht hat. Natürlich kann CSS Text Strikethrough auch verwendet werden, um Preisangebote anzuzeigen oder einen Text besonders hervorzuheben.

Insbesondere ist das von CSS-Text durchgestrichene Attribut die Textdekoration und sein Wert ist durchgestrichen, wie unten gezeigt: Wir können auch CSS-Pseudoklassenselektoren verwenden, um eine flexiblere Textdurchstreichung zu erreichen.

Zum Beispiel können wir einen Durchstreichungseffekt hinzufügen, wenn die Maus über den Text mit der Demo-ID schwebt, wie unten gezeigt:

<code>text-decoration: line-through;</code>

Der obige Code stellt den Text dar mit der ID von demo Fügen Sie einen Durchstreichungseffekt hinzu, wenn die Maus darüber schwebt, d. h. wenn sich die Maus über den Text bewegt, erscheint der Text durchgestrichen.

Wenn wir einen speziellen durchgestrichenen Stil hinzufügen möchten, können wir das CSS-Pseudoelement :before oder :after verwenden, um dies zu erreichen, wie unten gezeigt:

<code>#demo:hover {
    text-decoration: line-through;
}</code>

Das Obige Der Code wird in „Durchgestrichener Stil vor dem Text mit der Demo-ID“ ausgedrückt. Die Farbe des Durchgestrichenen ist Schwarz, die Breite nimmt die gesamte Textbreite ein, die Höhe beträgt 1 Pixel und die Position befindet sich in der Mitte Text.

Es ist zu beachten, dass wir bei der Verwendung von durchgestrichenem CSS-Text auch auf Kompatibilitätsprobleme achten müssen. Da verschiedene Browser die Textdekoration möglicherweise unterschiedlich interpretieren, sollten Sie beim Schreiben keine browserspezifischen Methoden zur Stiländerung verwenden. Es wird empfohlen, universelle Attribute zu verwenden.

Das obige ist der detaillierte Inhalt vonCSS-Text durchgestrichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!