Comment utiliser le texte CSS barré

Le texte CSS barré est un effet de style de texte courant. Vous pouvez ajouter une ligne horizontale au texte pour indiquer que le texte a été supprimé ou qu'il s'agit d'un commentaire. Il peut également être utilisé pour souligner les modifications apportées au texte.

Dans la conception Web, le texte barré CSS est largement utilisé dans certains articles de blog pour indiquer que l'auteur a modifié ou supprimé le contenu du texte original. Bien entendu, le texte CSS barré peut également être utilisé pour afficher des offres spéciales ou pour créer un texte spécialement mis en valeur.

Plus précisément, l'attribut utilisé par le texte barré CSS est la décoration de texte, et sa valeur est linéaire, comme indiqué ci-dessous :

text-decoration: line-through;

De plus, dans les applications pratiques, nous pouvons également utiliser des sélecteurs de pseudo-classe CSS pour implémenter davantage texte barré flexible.

Par exemple, nous pouvons ajouter un effet barré lorsque la souris survole le texte avec l'ID de la démo, comme indiqué ci-dessous :

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

Le code ci-dessus signifie ajouter un effet barré lorsque la souris survole le texte avec l'ID de démo, c'est-à-dire lorsque la souris Lorsque vous passez sur le texte, le texte apparaît barré.

Si nous voulons ajouter un style barré spécial, nous pouvons utiliser le pseudo-élément CSS :before ou :after pour y parvenir, comme indiqué ci-dessous :

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

Le code ci-dessus signifie ajouter un style barré devant le texte avec la démo ID, la couleur du barré est noire, la largeur occupe toute la largeur du texte, la hauteur est de 1 pixel et la position est au centre du texte.

Il convient de noter que lors de l'utilisation du texte CSS barré, il faut également faire attention aux problèmes de compatibilité. Étant donné que les différents navigateurs peuvent interpréter différemment la décoration du texte, évitez d'utiliser des méthodes de modification de style spécifiques au navigateur lors de l'écriture. Il est recommandé d'utiliser des attributs universels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!