Un strikethrough est défini comme une ligne à travers le texte. Il est couramment utilisé pour montrer du texte non pertinent, mais nous pouvons également l'utiliser pour la décoration. Les premières versions de HTML ont utilisé un élément pour faire un texte de texte. Cependant, HTML5 ne prend pas en charge l'élément. Plus précisément, dans CSS, le «textaine-décoration«La valeur de la propriété est définie comme«ligne à travers"Dans le même but.

Cet article vous guidera sur le strikethrough CSS et les autres propriétés de décoration de texte. Alors, commençons!

Quelles sont les propriétés CSS-Decoration du texte?

Il y a beaucoup de "textaine-décoration»Valeurs de propriétés utilisées dans CSS. Certains d'entre eux sont énumérés ci-dessous:

• ligne à travers
• souligner
• surmonter
• aucun

Passons-les un par un!

DÉCRITURE DE TEXTE: LIGNE

Le "ligne à travers”La propriété textuelle-décoration est utilisée pour ajouter une ligne horizontale à travers le texte. Cette propriété est également connue sous le nom de texte interrompu.

Exemple 1: Comment utiliser CSS Strikethrough?

Tout d'abord, nous ajouterons un nommé "récipient”À l'intérieur de l'élément corporel du fichier HTML. Ensuite, incluez le

Tag pour ajouter du texte.

Html

Décoration de texte: Strikethrough

Dans la section CSS, attribuez la valeur de la propriété textuelle-décoration comme «ligne à travers".

CSS

Décoration du texte: ligne;

On peut voir que la propriété en ligne est appliquée avec succès au texte ajouté:

Pour rendre cette décoration plus intéressante, appliquons une animation.

Exemple 2: Comment appliquer l'animation sur le strikethrough avec CSS?

Ajoutez un élément div à l'intérieur de l'élément corporel du fichier HTML. À l'intérieur de la div, placez une rubrique

Tag avec du texte.

Html

Bienvenue à Linuxhint!

Ensuite, appliquez des styles aux éléments HTML.

CSS

Les éléments HTML sont coiffés avec les propriétés CSS. Pour définir l'alignement du texte dans le centre, l'élément DIV est fourni avec le texte de la propriété avec le centre de valeur:

div
Texte-aligne: Centre;

Ligne de style Div

.doubler
Font-Family: Sans-Serif;
taille de police: 60px;
Couleur: # 00154F;
Position: relative;
Affichage: bloc en ligne;
curseur: pointeur;

Les propriétés CSS appliquées à la ligne Div sont expliquées ci-dessous:

• "famille de polices«La propriété définit la famille des polices du texte comme«sans-serif".
• "taille de police«Propriété avec valeur»60px»Définit la taille de la police à 60px.
• "couleur»La propriété est utilisée pour spécifier la couleur du texte.
• "position"Avec valeur"relatif»Ajuste la ligne DIV par rapport à sa position actuelle.
• "afficher«Propriété comme«bloc en ligne»Autorisera la largeur de la ligne de réglage et limitera le contenu à afficher dans la ligne suivante.
• "le curseur"Avec la valeur"aiguille»Spécifie que lorsque la souris plane sur le texte, un curseur de main pointu s'affichera.

Ligne de style Div après sélecteur

Le code divisé ci-dessous est en train de coiffer la ligne DIV une fois qu'il a été sélectionné. Le "::après«Est connu comme le sélecteur après:

.ligne :: après
contenu: ";
bloc de visualisation;
Largeur: 0;
hauteur: 20px;
Color d'arrière-plan: # F4AF1B;
Position: absolue;
En bas: 10%;
Z-Index: -1;
transition: largeur 1s;

Une fois la ligne sélectionnée, les propriétés mentionnées seront appliquées comme expliqué:

• "contenu»La propriété est utilisée pour insérer le contenu spécifié dans l'élément. Si la valeur n'est aucune, après la sélection, le contenu est défini selon le code pseudo mentionné.
• "afficher"Comme un bloc prend la largeur de l'écran disponible et définit le bloc pour commencer à une nouvelle ligne.
• "largeur»La propriété est utilisée pour définir la largeur de l'élément.
• "hauteur»La propriété est utilisée pour régler la hauteur de l'élément.
• "Couleur de l'arrière plan»La propriété est utilisée pour régler la couleur d'arrière-plan de l'élément.
• "position"Comme Absolute fait référence que la ligne DIV se positionnera par rapport à son parent div après la sélection.
• "bas»La propriété ajoute 10% d'espace au bas de la ligne.
• "index z»Définit l'ordre des éléments qui se chevauchent.
• "transition»La propriété définit le mouvement de l'élément où la valeur de largeur représente la transition qui doit être appliquée sur la propriété de largeur d'un élément, et 1s est sa durée.

Ligne de style Div après volant

Réglez la largeur du conteneur de ligne à 100% lorsque la souris plane dessus:

.Ligne: Hover :: After
Largeur: 100%;

En conséquence, le survol du texte ajouté ajoutera un strikethrough animé:

Décoration du texte: souligner

Le "souligner”La valeur de la propriété textaine placera une ligne sous le texte. Cette propriété est principalement utilisée pour rendre le texte requis proéminent.

CSS

Décoration du texte: soulignement;

Sortir

DÉCRITURE TEXT:

La décoration excessive fait référence au texte ayant une ligne horizontale dessus. Il est également connu comme une surbar. Plus précisément, pour rendre un texte surclassé, affectez le «textaine-décoration«Propriété une valeur«surmonter".

CSS

Décoration du texte: surclassion;

En attribuant la valeur surclastique, on peut observer qu'une barre est affichée sur le texte:

text-decoration: aucun

Si vous n'avez pas besoin de décoration de texte, attribuez la valeur "aucun" au "textaine-décoration" propriété.

CSS

Décoration du texte: aucune;

Sortir

Jusqu'à présent, nous avons discuté des propriétés du texte-décoration, de la ligne, des soulignements, des surlignes et aucun avec des exemples. La section suivante discutera des valeurs d'attribut de texto-décoration. Alors allons-y!

Valeurs d'attribut texto-détectées

Vous pouvez également utiliser Ajouter d'autres valeurs d'attribut:

• Text-décoration-ligne: Il définit le type de ligne tel que le souligne.
• couleur-décoration de texte: Il définit la couleur de ligne.
• de style texto-décoration: Il spécifie le style de la ligne, qu'il soit ondulé, pointillé, pointillé, etc.
• Texte-décoration-épaisseur: Il définit la largeur de la ligne.

Regardez l'exemple ci-dessous, qui montre la décoration de texte avec plusieurs valeurs discutées ci-dessus.

Exemple

Tout d'abord, ajoutez une ligne pointillée sur le texte avec une largeur de 10px et la couleur spécifiée:

Décoration de texte: TRIVERNELLED PEAPT 10PX # 00154F;

Ensuite, un soulignement ondulé avec la largeur et la couleur requises:

Décoration du texte: soulignement RVB Wavy 9px (249, 253, 2);

Les lignes de code CSS ci-dessus afficheront les résultats suivants:

Nous avons fourni les informations relatives au strikethrough CSS et à d'autres propriétés de décoration de texte.

Conclusion

Les propriétés du texte-décoration de CSS définissent l'apparence de différentes lignes décoratives sur le texte ajouté. Plus précisément, StrikethRough ajoute une ligne à travers le texte qui peut être appliqué en définissant la valeur de la décoration de texte comme «ligne à travers". Cet article a discuté du strikethrough CSS, d'autres propriétés de décoration de texte et des valeurs d'attribut.