Comment utiliser CSS pour obtenir un effet de suppression de texte

Dans la conception Web, nous pouvons avoir besoin d'effets spéciaux pour augmenter la beauté et l'intérêt de la page. Par exemple, nous pouvons avoir besoin de certains effets de texte pour mettre en évidence certaines informations importantes ou mettre en valeur certains contenus. L’une d’elles est le texte barré, où du texte est barré pour indiquer qu’il n’est plus valide ou pertinent. Cet article explique comment utiliser CSS pour obtenir un effet de suppression de texte.

1. text-decoration: line-through;

Pour obtenir l'effet de suppression de texte, nous pouvons utiliser l'attribut text-decoration et définir la valeur sur line-through. Cette propriété est généralement utilisée pour souligner du texte, mais elle peut également être utilisée pour définir des effets de suppression de texte. Voici un exemple de code :

<p class="delete">这是一段被删除的文本。</p>

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

Dans cet exemple, nous ajoutons une classe nommée "delete" à l'élément p et définissons la valeur de son attribut text-decoration sur line-through. Cela signifie qu'au sein de ce texte, les mots seront barrés pour indiquer qu'ils ont été supprimés. C'est le moyen le plus basique et le plus simple d'obtenir un effet de suppression de texte.

2. Personnalisez la couleur, le style et l'épaisseur barrés

Dans le style, nous pouvons personnaliser davantage la couleur, le style et l'épaisseur barrés. Les attributs couramment utilisés sont text-decoration-color, text-decoration-style et text-decoration-thickness. Voici un exemple de code :

<p class="delete" style="text-decoration-color: red; text-decoration-style: dotted; text-decoration-thickness: 2px;">这是一段自定义线样式、线粗细和线颜色的被删除文本。</p>

.delete {
  text-decoration-color: red;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

Dans cet exemple, nous ajoutons également une classe nommée "delete" à l'élément p, mais cette fois nous utilisons les attributs supplémentaires du style de texte. Nous définissons la couleur barrée sur rouge, le style sur pointillé et l'épaisseur sur 2 pixels. De cette façon, nous pouvons personnaliser le style de suppression de texte selon les besoins pour répondre aux besoins spécifiques de nos pages Web.

3. Utilisez des pseudo-éléments ::before et ::after

En plus d'utiliser l'attribut text-decoration, nous pouvons également utiliser des pseudo-elements ::before et ::after pour obtenir des effets de suppression de texte. Voici l'exemple de code :

<p class="delete">这是一段使用伪元素实现的被删除文本。</p>

.delete::before,
.delete::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #000;
}

.delete::before {
    transform: rotate(-45deg);
}

.delete::after {
    transform: rotate(45deg);
}

Dans cet exemple, nous utilisons les pseudo-éléments ::before et ::after pour créer un barré. L'attribut content de ces éléments est défini sur vide et leur position est définie sur absolue, leur permettant de chevaucher le texte. Nous avons ajouté une bordure à ces éléments, puis les avons fait pivoter de 45 degrés pour créer une forme barrée.

Résumé

Lors de la conception de pages Web, l'effet de suppression de texte est un effet très utile qui peut aider à représenter des scènes et des dialogues appropriés. Dans cet article, nous avons présenté trois façons d'obtenir un effet de suppression de texte : l'attribut text-decoration, le style personnalisé et l'utilisation de pseudo-éléments. J'espère que cet article pourra vous aider à accroître la flexibilité et le plaisir de la conception Web.

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!