css3 écrire supprimer

CSS3 est un langage de feuille de style utilisé pour la conception et la mise en page Web. Il possède des fonctionnalités riches et des fonctions puissantes. Parmi eux, le barré est un effet courant, généralement utilisé pour représenter du texte ou du contenu supprimé. Cet article explique comment écrire du texte barré en utilisant CSS3.

1. Utilisez l'attribut text-decoration

L'attribut text-decoration est utilisé pour définir les effets de décoration de texte, y compris les effets barrés. En définissant sa valeur sur line-through, l'effet barré peut être obtenu. Par exemple, le code CSS suivant :

.delete {
    text-decoration: line-through;
}

Ce style sera appliqué à l'élément portant le nom de classe delete, afin que tout le contenu du texte ait un effet barré.

2. Style barré personnalisé

En plus d'utiliser l'attribut text-decoration pour définir l'effet barré, CSS3 propose également une variété de façons de personnaliser le style barré pour le rendre plus beau et personnalisé.

2.1 Définir la couleur barrée

Définissez la couleur barrée via l'attribut text-decoration-color, par exemple :

.delete {
    text-decoration: line-through;
    text-decoration-color: red;
}

Ce style sera appliqué à l'élément avec le nom de classe delete, afin que tout le contenu du texte soit barré la couleur est rouge.

2.2 Définir la position barrée

Définissez la position barrée via la propriété text-decoration-position. Par défaut, le barré est au centre du texte. Vous pouvez utiliser cette propriété pour définir le décalage supérieur et inférieur du barré.

.delete {
    text-decoration: line-through;
    text-decoration-position: under;
}

Ce style sera appliqué à l'élément avec le nom de classe delete afin que la position barrée de tout le contenu du texte soit en dessous du texte.

2.3 Définir la largeur barrée

Définissez la largeur barrée via la propriété text-decoration-thickness. Par défaut, la largeur barrée est de 1px. Vous pouvez utiliser cette propriété pour modifier la largeur du barré.

.delete {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

Ce style sera appliqué à un élément avec un nom de classe supprimé, rendant tout le contenu du texte barré de largeur 2px.

3. Utilisez des pseudo-éléments pour obtenir le barré

En plus d'utiliser l'attribut text-decoration pour définir l'effet barré, CSS3 peut également utiliser des pseudo-éléments pour obtenir l'effet barré. En définissant l'attribut de contenu du pseudo-élément sur vide et en définissant sa largeur, sa couleur, sa position et d'autres attributs, vous pouvez obtenir l'effet barré. Par exemple, le code CSS suivant :

.delete::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

Ce style sera appliqué au pseudo-élément de l'élément de nom de classe delete, lui faisant afficher un barré d'une largeur de 1px et une couleur de noir sous le texte.

Résumé

Nous pouvons facilement obtenir l'effet barré grâce aux attributs de décoration de texte, aux styles barrés personnalisés et aux pseudo-éléments. Il convient de noter que dans certains scénarios particuliers, tels que des considérations liées à l'expérience de lecture ou à l'optimisation du référencement, le barré ne s'applique pas. Il doit être pris en compte en fonction de la situation spécifique lors de son utilisation.

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!