Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Soulignement dans h2 ne peut s'annuler

8 réponses
Avatar
fra-PasDeSp
Soit des h2 soulignés :
h2 { text-decoration: underline; }

Ces sous-titres ont un " :" en fin de ligne... que je souhaite pas voir
souligné (je suis un peu maniaque).

Hors si je place ces " :" dans un span et définis
h2 span { text-decoration: none; }
ces spans restent soulignés !!

Pourquoi ? Que faire de simple ?

Merci pour votre aide.
--
Fra

8 réponses

Avatar
Photo
Le 07/07/2015 19:15, Fra a écrit :
Soit des h2 soulignés :
h2 { text-decoration: underline; }

Ces sous-titres ont un " :" en fin de ligne... que je souhaite pas voir
souligné (je suis un peu maniaque).

Hors si je place ces " :" dans un span et définis
h2 span { text-decoration: none; }
ces spans restent soulignés !!

Pourquoi ? Que faire de simple ?

Merci pour votre aide.




Peut être ne pas l'inclure dans le H2 ?

--
http://grenault.net/accueil.htm
Avatar
fra-PasDeSp
Photo wrote:

Le 07/07/2015 19:15, Fra a écrit :
> Soit des h2 soulignés :
> h2 { text-decoration: underline; }
>
> Ces sous-titres ont un " :" en fin de ligne... que je souhaite pas voir
> souligné (je suis un peu maniaque).
>
> Hors si je place ces " :" dans un span et définis
> h2 span { text-decoration: none; }
> ces spans restent soulignés !!
>
> Pourquoi ? Que faire de simple ?
>
> Merci pour votre aide.
>

Peut être ne pas l'inclure dans le H2 ?



Dans ce cas comment éviter le retour à la ligne en fin de h2 ?
--
Fra
Avatar
fra-PasDeSp
Fra wrote:

Soit des h2 soulignés :
h2 { text-decoration: underline; }

Ces sous-titres ont un " :" en fin de ligne... que je souhaite pas voir
souligné (je suis un peu maniaque).

Hors si je place ces " :" dans un span et définis
h2 span { text-decoration: none; }
ces spans restent soulignés !!

Pourquoi ? Que faire de simple ?



Bon finalement j'ai fait le contraire : le underline sur le span et le
titre mis entre <span> dans le <h2>... et là ça marche !!!
Je ne comprends toujours pas pourquoi.

Au fait c'est pas génant pour la sémantique du <h2> d'avoir le texte
principal de ce h2 entre span ?
--
Fra
Avatar
Olivier Miakinen
Bonjour,

Le 07/07/2015 19:15, (Fra) a écrit :
Soit des h2 soulignés :
h2 { text-decoration: underline; }

Ces sous-titres ont un " :" en fin de ligne... que je souhaite pas voir
souligné (je suis un peu maniaque).



Je comprends.


Hors



Or (moi aussi je suis un peu maniaque)

si je place ces " :" dans un span et définis
h2 span { text-decoration: none; }
ces spans restent soulignés !!



Si tu remplaces « none » par « line-through » dans cette déclaration, tu
verras que tu as à la fois le soulignement dû au h2 et le barré dû au
span.

Pourquoi ?



Cf. supra. Il y a un soulignement dans tout le h2, que celui-ci ait
ou non un span à l'intérieur.

Que faire de simple ?



Tu as répondu toi-même ensuite : mettre ce que tu veux souligner dans un
span plutôt que ce que tu ne veux pas souligner. Ce n'est pas du tout
gênant pour la sémantique.

Note que j'ai essayé ceci, mais que ça ne fonctionne pas non plus :
h2:after { content: " :"; text-decoration: none; }

--
Olivier Miakinen
Avatar
Jean Francois Ortolo
Le 08/07/2015 22:25, Olivier Miakinen a écrit :
Bonjour,

Le 07/07/2015 19:15, (Fra) a écrit :
Soit des h2 soulignés :
h2 { text-decoration: underline; }

Ces sous-titres ont un " :" en fin de ligne... que je souhaite pas voir
souligné (je suis un peu maniaque).



Je comprends.


Hors



Or (moi aussi je suis un peu maniaque)

si je place ces " :" dans un span et définis
h2 span { text-decoration: none; }
ces spans restent soulignés !!



Si tu remplaces « none » par « line-through » dans cette déclaration, tu
verras que tu as à la fois le soulignement dû au h2 et le barré dû au
span.

Pourquoi ?



Cf. supra. Il y a un soulignement dans tout le h2, que celui-ci ait
ou non un span à l'intérieur.

Que faire de simple ?



Tu as répondu toi-même ensuite : mettre ce que tu veux souligner dans un
span plutôt que ce que tu ne veux pas souligner. Ce n'est pas du tout
gênant pour la sémantique.

Note que j'ai essayé ceci, mais que ça ne fonctionne pas non plus :
h2:after { content: " :"; text-decoration: none; }





Mes 2 cents

Celà ne serait-il pas du au fait que span est inline et h1 block ?

Si vous mettez quelle chose du genre :

<h1>sous_titre<span style="display: inline-block;
text-decoration:none;"> : </span></h1>

Respectueusement.

Jean François Ortolo
Avatar
Olivier Miakinen
Bonjour,

Le 08/07/2015 22:44, Jean Francois Ortolo a écrit :

Si vous mettez quelle chose du genre :

<h1>sous_titre<span style="display: inline-block;
text-decoration:none;"> : </span></h1>



Je ne comprends pas pourquoi, mais en effet ça fonctionne très bien
en ajoutant « display: inline-block; » aux CSS.
Avatar
Pierre Maurette
Olivier Miakinen :
Bonjour,

Le 08/07/2015 22:44, Jean Francois Ortolo a écrit :

Si vous mettez quelle chose du genre :

<h1>sous_titre<span style="display: inline-block;
text-decoration:none;"> : </span></h1>



Je ne comprends pas pourquoi, mais en effet ça fonctionne très bien
en ajoutant « display: inline-block; » aux CSS.



Je ne suis pas sûr qu'il y ait toujours une belle logique dans ce genre
de règle. En fait, il me semble que le comportement un peu hybride du
inline-block répond avant tout à un besoin fréquent. Dans cette
logique, il n'hérite pas de text-decoration (mais de color, en
revanche, oui), comme un block je crois. Donc on peut faire l'économie
du text-decoration:none (ou no-underline), à vérifier quand même sur
tous les navigateurs, autant le laisser. Autre chose, l'espace avant
les ':' va sauter, pour avoir un espace non souligné, il faut utiliser
&nbsp;

Je pense que le plus pratique est de créer une classe spécifique, qui
pourra d'ailleurs également être utilisée pour des étiquettes de
formulaires:

.deuxpoints::after {
display: inline-block;
content: '0a0:';
}

Si on souhaite conserver le soulignement sous le ' :':
.deuxpointsul::after {
display: inline-block;
text-decoration: inherit;
content: '0a0:';
}

utilisation:

<h2 class="maclassedetitre deuxpoints">titre sans colons</h2>

Ça devrait être pratique, en particulier quand le texte est obtenu
dynamiquement (translate, templates, etc.). Mais il faut que l'absence
des ':' dans les chaînes soit cohérente, ce qui n'est pas toujours le
cas.

--
Pierre Maurette
Avatar
fra-PasDeSp
Olivier Miakinen <om+ wrote:

> Hors

Or (moi aussi je suis un peu maniaque)



Désolé.

[...]

> Pourquoi ?

Cf. supra. Il y a un soulignement dans tout le h2, que celui-ci ait
ou non un span à l'intérieur.



Est-ce une règle spécifique aux titres de ne pas pouvoir annuler un
underline ?

> Que faire de simple ?

Tu as répondu toi-même ensuite : mettre ce que tu veux souligner dans un
span plutôt que ce que tu ne veux pas souligner.



C'est quand même bizarre de pouvoir créer un underline par un span mais
de ne pas pouvoir l'annuler par un span !

Ce n'est pas du tout gênant pour la sémantique.



Bon bein j'en reste là. Merci à tous.
--
Fra