So verwenden Sie 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 wurde oder es sich um einen Kommentar handelt.

Im Webdesign wird CSS-Textdurchstreichung 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.

Konkret handelt es sich bei dem von der CSS-Textdurchstreichung verwendeten Attribut um Textdekoration, und sein Wert ist durchgestrichen, wie unten gezeigt:

text-decoration: line-through;

Darüber hinaus können wir in praktischen Anwendungen auch CSS-Pseudoklassenselektoren verwenden, um mehr zu implementieren flexible Textdurchstreichung.

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

#demo:hover {
    text-decoration: line-through;
}

Der obige Code bedeutet, einen Durchstreichungseffekt hinzuzufügen, wenn die Maus über den Text mit der ID schwebt Wenn Sie die Maus über den Text bewegen, 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:

#demo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-color: #000;
}

Der obige Code bedeutet, dass vor dem Text ein durchgestrichener Stil hinzugefügt wird Die ID-Demo: 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 des Textes.

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 vonSo verwenden Sie CSS-Text durchgestrichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!