CSS strikethrough de couleur différente du texte ?

Question

CSS strikethrough de couleur différente du texte ?

Demandé el 10 de Juillet, 2009: Quand la question a-t-elle été
68698 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Les éléments HTML del , strike ou s peuvent tous être utilisés pour un effet d'effacement du texte. Exemples :

del

.... donne : ~~del~~

<strike>strike</strike> and <s>strike</s>

.... donne : ~~grève~~ et ~~grève~~

Le CSS text-decoration avec une valeur line-through peuvent être utilisés de manière similaire. Le code...

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

...sera également rendu comme suit : ~~text-decoration:line-through~~

Cependant, la ligne barrée est généralement de la même couleur que le texte.

Peut-on utiliser le CSS pour donner une couleur différente à la ligne ?

Demandé el 10 de Juillet, 2009 par gojomo

0 votes

Pour un effet de frappe transparent, on peut voir texte transparent corrigé

Commenté el 9 de Mai, 2015 par web-tiki

Answer 1

5 Réponses

Answer 2

428voto

gojomo Points 3426

Oui, en ajoutant un élément d'habillage supplémentaire. Attribuez la couleur de passage de ligne souhaitée à un élément extérieur, puis la couleur de texte souhaitée à l'élément intérieur. Par exemple :

<span style='color:red;text-decoration:line-through'>
  <span style='color:black'>black with red strikethrough</span>
</span>

...ou...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>

(Notez, cependant, que <strike> est considéré comme déprécié en HTML4 et obsolète en HTML5 ( voir aussi W3.org ). L'approche recommandée est d'utiliser si le sens réel de la suppression est voulu, ou sinon d'utiliser un <s> ou le style avec text-decoration CSS comme dans le premier exemple ici).

Pour faire apparaître le barré dans le cas d'un:hover, une feuille de style explicite (déclarée ou référencée dans le fichier <HEAD> ) doit être utilisé. (Les :hover ne peut pas être appliquée avec des attributs STYLE en ligne). Par exemple :

<head>
  <style>
    a.redStrikeHover:hover {
      color:red;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <a href='#' class='redStrikeHover'>
    <span style='color:black'>hover me</span>
  </a>
</body>

(IE7 semble nécessiter une href être fixé sur le <a> avant :hover a un effet ; FF et les navigateurs basés sur WebKit n'en ont pas).

Répondu el 10 de Juillet, 2009 par gojomo (3426 Points )

9 votes

Voilà pour ma réponse "c'est impossible !".

Commenté el 10 de Juillet, 2009 par John Kugelman

0 votes

Oui, dans mes tests dans FF3+, IE7+, Chrome. Voir la section ajoutée, ci-dessus.

Commenté el 12 de Juillet, 2009 par gojomo

1 votes

Une implémentation de Jquery serait très utile.

Commenté el 13 de Décembre, 2010 par yakunins

Afficher 7 autres commentaires

Answer 3

77voto

Mechanical snail Points 8589

En date de février 2016 CSS 3 a le support mentionné ci-dessous. Voici un extrait d'une page de produit unique de WooCommerce avec une remise de prix.

/*Price before discount on single product page*/
body.single-product .price del .amount {
color:           hsl(0, 90%, 65%);
font-size:       15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}

Résultant en :

CSS 3 disposera probablement d'un support direct utilisant le text-decoration-color propriété . En particulier :

Le site text-decoration-color La propriété CSS définit la couleur utilisée pour dessiner les soulignés, les surlignés ou les barrés spécifiés par text-decoration-line . C'est la manière préférée de colorer ces décorations de texte, plutôt que d'utiliser des combinaisons d'autres éléments HTML.

Voir aussi text-decoration-color dans le projet de spécification CSS 3 .

Si vous voulez utiliser cette méthode immédiatement, vous devez probablement la préfixer, en utilisant -moz-text-decoration-color . (Vous pouvez également le spécifier sans -moz- par souci de compatibilité avec l'avenir).

Répondu el 4 de Juin, 2012 par Mechanical snail (8589 Points )

2 votes

"CSS 3 aura probablement" est plutôt... optimiste.

Commenté el 4 de Juin, 2012 par BoltClock

5 votes

@BoltClock : En quoi est-ce optimiste ? C'est déjà dans le projet de travail du W3C, qui est activement poursuivi.

Commenté el 4 de Juin, 2012 par Mechanical snail

2 votes

Selon caniuse aucun navigateur ne prend actuellement (en 2014) en charge les éléments suivants text-decoration-color sans préfixe.

Commenté el 3 de Octobre, 2014 par Blazemonger

Afficher 4 autres commentaires

Answer 4

6voto

ibolmo Points 41

En complément de @gojomo, vous pourriez utiliser :after pseudo élément pour l'élément supplémentaire. Le seul problème est que vous devrez définir votre élément de type innerText dans un data-text puisque les CSS ont des limites content fonctions.

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}

<s data-text="Strikethrough">Strikethrough</s>

Répondu el 22 de Août, 2013 par ibolmo (41 Points )

Answer 5

5voto

simbo Points 54

Voici une approche qui utilise un dégradé pour simuler la ligne. Elle fonctionne avec les frappes multilignes et ne nécessite pas d'éléments DOM supplémentaires. Mais comme il s'agit d'un dégradé d'arrière-plan, il se trouve derrière le texte...

del, strike {
  text-decoration: none;
  line-height: 1.4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
  background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  -webkit-background-size: 1.4em 1.4em;
  background-size: 1.4em 1.4em;
  background-repeat: repeat;
}

Voir violon : http://jsfiddle.net/YSvaY/

Les arrêts de couleur du dégradé et la taille du fond dépendent de la hauteur de la ligne. (J'ai utilisé LESS pour le calcul et Autoprefixer ensuite...)

Répondu el 11 de Mars, 2014 par simbo (54 Points )

Answer 6

0voto

kpowz Points 23

L'attribution de la couleur de passage à la ligne souhaitée à un élément parent fonctionne pour l'élément texte supprimé ( ) également - ce qui suppose que le client rende comme une ligne traversante.

http://jsfiddle.net/kpowz/vn9RC/

Répondu el 22 de Mars, 2013 par kpowz (23 Points )

CSS strikethrough de couleur différente du texte ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS strikethrough de couleur différente du texte ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: