Epaisseur du trait de "line-through"

Bonjour,
je suis nouveau sur ce forum, et j'espère que vous pourrez me donner des éléments pour trouver une solution à mon problème.
Je voudrais savoir si il y a moyen d'avoir un trait plus épais sur la propriété "line-through" ...

<style>
  .green{
   color: #0c0;
     }
  .black{
   color: #000;
   }
  .underline{
   text-decoration: line-through;
   }
 </style>

 
<span class="green underline">
        <span class="black">
            Black text with a green underline
        </span>
</span>

Merci pour votre aide
Modifié par new_dev (27 Jun 2011 - 11:45)

Bonjour,

à ma connaissance il est impossible d'augmenter ou même de diminuer l'épaisseur de "line-through".

Alors comment pourrais je faire pour faire un trait barré d'une épaisseur que je pourrais définir sur mon texte et qui s'adapte en fonction de la longueur du texte ??
Surtout pas un background car l'image est derrière le texte ... ;o)
merci de vos réponses

Bonjour et bienvenue,

évite d'utiliser des noms de classe comme green et black, donne plutôt la fonction de ces classes (warning, exergue, efface, faux, etc) parce que si tu modifies plus tard la couleur tu te retrouves avec des .green { color: red; }

Tiens faut que je pense sur le site des RMLL à renommer #barredroite { float: left; } en #colonne ou qqch comme ça ça en est une parfaite illustration !

Pour ton souci, tu peux utiliser plusieurs images de fond et ça fonctionne avec pas mal de navigateurs (non pas IE6 ou IE7 et 8 j'ai oublié).
Ou alors il te faut un élément dans l'élément que tu veux "barrer" (le span.black fait l'affaire).
Tu lui fixes un line-height de 50% et une bordure basse de 2px : est-ce que c'est à peu près ce que tu recherches ?

Bonjour et merci pour ta réponse
1) pour le background cela ne convient pas car l'image est derrière le texte .. il faudrais la barre devant le texte à barer ;o)

2) j'ai testé la seconde solution en mettant un élément dans l'élément, hors le trait doit être ajusté par rapport au texte à barré (le texte pouvant varier ...)

J'y arrive avec le code suivant, mais seulement pour la première ligne de texte (si jamais le texte passe sur plusieurs lignes...):

<span style="position:relative;">
  <span style="position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:red;"></span>
  Du texte par ici
</span>

Bien sûr on peut faire la même chose avec juste un seul SPAN portant une classe, et en utilisant un pseudo-élément (:before ou :after), ce qui allègera d'autant le code HTML.
Modifié par fvsch (28 Jun 2011 - 11:46)