Barré CSS de couleur différente du texte?

269

Les éléments HTML del, strikeou speuvent tous être utilisés pour une grève par l' effet texte. Exemples:

<del>del</del>

.... donne: del

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

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

La text-decorationpropriété CSS avec une valeur line-throughpeut être utilisée de la même manière. Le code...

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

... s'affichera également comme suit: text-decoration: line-through

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

Le CSS peut-il être utilisé pour rendre la ligne d'une couleur différente?

html css gojomo
la source
Pour un effet de frappe transparent, vous pouvez voir une frappe transparente sur le texte
web-tiki

Réponses:

409

Oui, en ajoutant un élément enveloppant supplémentaire. Attribuez la couleur 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>
Développer l'extrait

...ou...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>
Développer l'extrait

(Notez cependant que cela <strike>est considéré comme obsolète en HTML4 et obsolète en HTML5 ( voir aussi W3.org ). L'approche recommandée est d'utiliser <del>si une véritable signification de la suppression est prévue, ou autrement d'utiliser un <s>élément ou un style avec text-decorationCSS comme dans le premier exemple ici.)

Pour faire apparaître le barré pour un: hover, une feuille de style explicite (déclarée ou référencée dans <HEAD>) doit être utilisée. (La :hoverpseudo-classe 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>
Développer l'extrait
(IE7 semble exiger que certains hrefsoient définis sur l' <a>avant :hovera un effet, contrairement aux navigateurs basés sur FF et WebKit.)

gojomo
la source
8
Voilà pour mon "c'est impossible!" répondre.
John Kugelman
1
L'implémentation de Jquery serait très utile.
yakunins
38
@utype Pourquoi utiliseriez-vous jQuery pour cela?
kapa
4
Les éléments d'emballage sont un peu nul. Dans la plupart des cas, vous pouvez obtenir presque le même effet avec un simple pseudo-élément, c'est del { position:relative }-à- dire et puis del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.
incarné
2
Juste un emballage. Ingénieux. Oh mon dieu, c'est mieux que tout ce que j'ai imaginé (pseudo-éléments). Bon travail!
CunningFatalist
69

Depuis février 2016 , CSS 3 dispose du support mentionné ci-dessous. Voici un extrait de la page produit unique d'un WooCommerce avec 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: Exemple de décoration de texte

CSS 3 aura probablement une prise en charge directe de l'utilisation de la text-decoration-colorpropriété . En particulier:

La text-decoration-colorpropriété CSS définit la couleur utilisée lors du dessin des soulignements, des surlignages ou des barrages spécifiés par text-decoration-line. C'est le moyen préféré pour colorer ces décorations de texte, plutôt que d'utiliser des combinaisons d'autres éléments HTML.

Voir également text-decoration-colordans le projet de spécification CSS 3 .

Si vous souhaitez utiliser cette méthode immédiatement, vous devrez probablement la préfixer à l'aide de -moz-text-decoration-color. (Indiquez-le également sans -moz-, pour la compatibilité ascendante.)

Escargot mécanique
la source
2
"CSS 3 aura probablement" est plutôt ... optimiste.
BoltClock
5
@BoltClock: Comment est-il optimiste? C'est déjà dans le projet de travail du W3C, qui est activement poursuivi.
Escargot mécanique
2
Selon caniuse , aucun navigateur ne prend actuellement en charge (en 2014) text-decoration-colorsans préfixe.
Blazemonger
4
Et 3 ans plus tard ... Firefox et Safari l'ont = 20% de portée.
André Werlang
1
selon le caniuse, actuellement pris en charge par FireFox uniquement
YakovL
35

J'ai utilisé un :afterélément vide et décoré une bordure dessus. Vous pouvez même utiliser des transformations CSS pour le faire pivoter pour une ligne inclinée. Résultat: pur CSS, pas d'éléments HTML supplémentaires! Inconvénient: ne passe pas sur plusieurs lignes, bien que l'OMI ne vous permette pas d'utiliser le barré sur de gros blocs de texte de toute façon.

s,
strike {
  text-decoration: none;
  /*we're replacing the default line-through*/
  position: relative;
  display: inline-block;
  /* keeps it from wrapping across multiple lines */
}

s:after,
strike:after {
  content: "";
  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;
  /* adjust as necessary, depending on line thickness */
  /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px);
  /* 1px = half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}
<p>Here comes some <strike>strike-through</strike> text!</p>
Développer l'extrait

Blazemonger
la source
@Veve HTML strikethrough element - la version non sémantique
Blazemonger
1
merci, j'ai cherché cela, spécialement la ligne de rotation
hanan-mstudio
L'utilisation de la méthode a: after est susceptible d'avoir des problèmes d'accessibilité
ewanm89
9

Si vous ne vous souciez pas d'Internet Explorer \ edge, le moyen le plus simple d'obtenir une couleur différente pour le barré serait d'utiliser la propriété CSS: text-decoration-color en conjonction avec text-decoration: line-through;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

- Ne fonctionne pas avec Edge \ Internet Explorer

Rohin Tak
la source
7

Ce CSS3 vous rendra la propriété plus facile et fonctionnera bien. 

span{
    text-decoration: line-through;
    text-decoration-color: red;
}
Vishnu SR
la source
6

En ajoutant à @gojomo, vous pouvez utiliser un :afterpseudo-élément pour l'élément supplémentaire. La seule mise en garde est que vous devrez définir votre innerTextdans un data-textattribut car CSS a des contentfonctions limitées .

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}
<s data-text="Strikethrough">Strikethrough</s>
Développer l'extrait

ibolmo
la source
5

Voici une approche qui utilise un dégradé pour truquer la ligne. Il fonctionne avec des frappes multilignes et n'a pas besoin d'éléments DOM supplémentaires. Mais comme c'est un dégradé de fond, c'est 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 de l'arrière-plan dépendent de la hauteur de ligne. (J'ai utilisé LESS pour le calcul et l'Autoprefixer par la suite ...)

simbo
la source
4

Voici:

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>
Développer l'extrait

Eugene Kardash
la source
3

D'après mon expérience,

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

n'est pas la meilleure option. J'ai demandé à un collègue d'utiliser cette méthode sans tester le navigateur croisé, j'ai donc dû revenir en arrière et le corriger car cela provoquait des problèmes dans Firefox. Ma recommandation personnelle serait d'utiliser le sélecteur: after pour créer un barré. De cette façon, il peut revenir à IE8 si vous le vouliez vraiment sans conflits de style et solide sur tous les autres navigateurs.

Cela crée également moins de balisage et à peu près la même quantité de style, ce qui, à mon avis, est assez important.

Donc, si quelqu'un d'autre rencontre des problèmes similaires, nous espérons que cela peut aider:

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

vous pouvez évidemment utiliser transform: translate au lieu des marges, mais cet exemple consiste à revenir à IE8

Brady Edgar
la source
2

La réponse de Blazemonger (au-dessus ou au-dessous) doit être votée - mais je n'ai pas assez de points.

Je voulais ajouter une barre grise sur certains boutons ronds CSS de 20 pixels de large pour indiquer «non disponible» et peaufiner le CSS de Blazemonger:

.round_btn:after {
    content:"";    /* required property */
    position: absolute;
    top: 6px;
    left: -1px;
    border-top: 6px solid rgba(170,170,170,0.65);
    height: 6px;
    width: 19px;
}
anoldermark
la source
0

L'affectation de la couleur de ligne souhaitée à un élément parent fonctionne également pour l'élément de texte supprimé ( <del>) - en supposant que le client rend<del> en ligne de ligne.

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

kpowz
la source
-4

Voici un exemple d'implémentation de jQuery - grâce à la réponse de gojomo et à la suggestion d'utype (+1 pour les deux)

$(function(){
  //===================================================================
  // Special price strike-out text
  // Usage:
  //   Normally:    <span class='price'>$59</span>
  //   On special:  <span class='price' special='$29'>$59</span>
  //===================================================================
  $(".price[special]").each(function() {
    var originalPrice = $(this).text();
    $(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
           .removeAttr('special')
           .addClass('special');
  });
});

Le CSS pour cela pourrait être

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }
Aximili
la source
Quelle partie n'est pas valide? Cela a fonctionné sur tous les principaux navigateurs
Aximili
3
"Works" et "valid" sont assez éloignés l'un de l'autre. Les navigateurs essaient d'interpréter même le HTML qui contient plusieurs erreurs. Voir Service de validation de balisage W3C , Pourquoi le HTML valide est-il important pour tout le monde? , Attributs DIV valides HTML? le SO
kapa
Si je ne me trompe pas, changer le nom d'attribut en "data-special" devrait le rendre valide HTML5.
Muhd
13
jQuery pour ajouter un wrapper pour obtenir un barré coloré? Que sommes-nous devenus?!
Chris Baker
3
Cela ressemble à un éventuel problème XSS: vous avez du texte brut originalPrice, puis réinjectez-le en HTML. Essayez d'utiliser .html()au lieu de .text(). Ou peut-être utiliser jQuery wrap().
tuomassalo