28172 sujets

CSS et mise en forme, CSS3

[Résolu] Supprimer un strikethrough

Bonjour à tous
Dans un contexte où le caractères sont définis comme barrés par text-decoration:line-through; je voudrais ajouter un texte par ::after qui ne soit pas barré.
J'ai utilisé text-decoration-line: none; mais ca n'a pas d'effet sur le résultat
Voir https://www.alma-musica.net/html/cal.php à la date du 8 décembre
Pourriez vous me dire ce qui cloche?
Merci de votre aide
Salut !

Je vois un Lun 9 pour décembre, mais la date du 8 Smiley smile

Après pour ne "pas" appliquer ton css line-thought sur ton pseudo élement, rajoute lui un 
display: inline-block;


exemple ici http://jsfiddle.net/n1gvpzfc/
Modifié par JENCAL (07 Oct 2019 - 12:26)
Merci pour ta réponse.
Deux questions:
1) pourquoi ça ne marche pas en display:block?
2) que faire pour forcer un saut de ligne, ce que le display-block était destiné à faire?
Je cite : https://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Par contre, solution qui ne fonctionne apparement pas sous IE...
Vaut mieux opter pour des <span> qui remplacerais les pseudos élements. car il n'y a pas de solutions miracle pour ce cas.
Si je comprends le texte en question, in n'affecte que ce qui est inline.
Mais justement quand je dis display:block, il n'est plus inline...???
Je laisse comme c'est, au moins pour le moment, c'est sans grand importance dans ce cas particulier, mias je trouve ça pour le moins bizarre...
Justement comme il n’est plus inline ça ne devrait pas appliquer le style, mais au contraire comme il l’applique je veux l’enlever et cela ne semble pas faisable.
Conclusion : ou bien je laisse tel quel ou bien je remplace mon after par du code dans la page.
Modifié par PapyJP (07 Oct 2019 - 22:41)
Administrateur
Bonjour,

lien plus récent : https://www.w3.org/TR/css-text-decor-3/#line-decoration
Je comprends "the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container" comme les lignes d'un élément bloc, les lignes d'un paragraphe par exemple (mais il faut pas dire "ligne" dans une recommandation parce qu'on peut écrire verticalement et tout autre sens/direction Smiley lol )

D'expérience avec une icône ajoutée à un lien où la première ne doit pas être soulignée et le lien si (au repos ou de toute façon au survol), il fallait soit ajouter un span autour du texte qui lui était souligné mais pas le lien (et il me semble bien qu'il y avait du display: inline-block; dans l'histoire).
L'autre moyen, plus ancien, était de faire flotter le pseudo-élément (c'est le 1er moyen cité par l'encadré vert "out-of-flow" "not propagated") mais avec le mobile et la nécessité d'être responsive, Flexbox et un meilleur contrôle du code HTML généré par les CMS, j'aime BIEN me passer des flottants et pas avoir à aligner verticalement à coup de vertical-align: -2px; Smiley langue
Modifié par Felipe (07 Oct 2019 - 17:30)
Grâce à vos réponses, je sis arrivé à résoudre le problème.
Le HTML (simplifié)

<tr class="cancelled">
	<td>...</td>
	<td>...</td>
	<td class="subject">
		<div class="concert"><span>Concert de Noël</span></div>
	</td>
	<td>...</td>
	<td>...</td>
</tr>

Le CSS (simplifié)

.cancelled {    /* barrer tous les caractères de la ligne */
    font-weight:normal;
    font-style:italic;
    text-decoration:line-through;
}
.cancelled  td.subject div {
    text-decoration:none;    /* supprimer les barres dans la <div> */
}
.cancelled td.subject div span {
    text-decoration:line-through;  /* les remettre dans le <span> 
}
.cancelled  td.subject div:after { /* after n'est pas barré */
    display: block;             /* force une nouvelle ligne */
    content:"ANNULÉ";
    color:black;
    font-style:normal;
    font-size: 1.2em;
}
Sujet clos
Aller à