[Résolu] Pseudo-élément ::before, où s'affiche le content ?

Bonjour,

Question basique.

<p>Un petit texte</p>

Il me semble que "un petit texte" s'appelle un élément anonyme (si non je changerais le titre de cette discussion).

Je veux appliquer un pseudo-élément ::before à cet élément mais il me semble qu'il est impossible de le cibler.

Certes, je peux le rendre non-anonyme mais c'est lourdingue :

<p><span>Un petit texte</span></p>

p {padding: 0 1em}
p > span:: before {content: "# "; color: red}

Avez-vous une idée qui m'évite de devoir surcharger le code html ?
Modifié par boteha_2 (10 Apr 2023 - 11:56)

Salut,

boteha_2 a écrit :
Il me semble que "un petit texte" s'appelle un élément anonyme

C'est un TEXT_NODE

Ensuite, je ne comprends pas bien ta question. Tu peux tout simplement faire :

p {padding: 0 1em}
p:before {content: "#"; color: red}

Si tu as un souci de padding avec ton <p> et le pseudo élément, ça devrait être un truc comme :

p {padding: 0 1em 0 0;}
p:before {content: "#"; color: red; display:inline-block; padding-right: 1em}

Modifié par niuxe (09 Apr 2023 - 19:23)

Bonjour niuxe,

Merci de ton suivi.

J'ai fait un codepen avec ton code, le résultat est bon.

Mais dans la vie réelle le code est plus compliqué et je ne pense pas que cela fonctionnera.

Je reviens après avoir testé;

Ta solution fonctionne aussi dans ma vie réelle.

Dans le codepen j'ai ajouté une bordure au p.

Je pensais que le pseudo élément allait s'afficher devant le bloc p.

Mais non, il s'affiche devant le contenu du bloc p, ce qui est exactement l'effet dont j'ai besoin.

Du coup il faudrait renommer la discussion :

p::before, le content s'affiche devant le contenu du p et non devant le p.

J'attends ton retour éventuel avant de cocher Résolu.

MERCI beaucoup.

Attention à ne pas te tromper dans la sémantique[^1]. Je veux dire par là que si tu as une série de <p> consécutifs, il est fort probable que ce soit une liste non ordonnée[^2].

Dans ce cas-là, il te faudra l'utiliser. Aussi, sache que tu peux la styliser avec list-style-type[^3]. N'oublie pas que tu as la règle raccourcie pour gérer l'ensemble des styles d'un <ol>, <ul>, <li> [^4]

[^1] HTML sémantique
[^2] <ul>
[^3] list-style-type
[^4] list-style
Modifié par niuxe (10 Apr 2023 - 04:49)

Bonjour,

un élément anonyme est un élément comme tbody ou tr dans cet exemple :

<table>
  <th scope="row">Cellule d'entête horizontal</th>
  <td>Donnée</td>
</table>

T'as vu ? Regarde mieux

C'est un élément qui ne figure ni dans le code source généré (la page HTML reçue du serveur web, Ctrl-U), ni dans le DOM (la page à un instant t dans le navigateur après que JS et CSS aient modifiés ce qu'il fallait afficher du code HTML initial) mais dont le navigateur a quand même besoin pour retomber sur ses pattes et afficher quelque chose alors que c'est pas parfaitement valide.
Historiquement, les pages HTML que nous créons sont truffées d'erreur, les navigateurs et/ou les anciennes normes HTML ont fait avec : pour savoir comment afficher la ligne de tableau alors qu'il n'y a pas de TR, il se l'invente, lui donne les dimensions et positions X,Y qu'aurait un TR s'il y en avait un et continue sa vie...
En HTML 5, tout cela est codifié pour que tous les navigateurs fassent la même chose même avec le pire des codes HTML.

Tu confonds peut-être le pseudo-élément CSS ::before et des concepts de programmation tels que .before() en jQuery ou JavaScript ? ::before CSS ça agit au même endroit - visuellement - qu'un .prepend() JS, ::after qu'un prepend() (la comparaison s'arrête là, ça ne fait pas la même chose du tout). Ou rien que le terme anglais c'est peut-être pas des mieux choisis...
C'est DANS l'élément, au tout début et pas avant l'élément. Avant le contenu.
Modifié par Felipe (10 Apr 2023 - 10:43)

Bonjour Felipe,

D'accord, ce n'est pas un élément anonyme.

Il me semble quand même que cela a un nom particulier, je reviendrais si je le retrouve.

J'ai changé le titre et je peux cocher Résolu.

niuxe a écrit :
Attention à ne pas te tromper dans la sémantique[^1]. Je veux dire par là que si tu as une série de <p> consécutifs, il est fort probable que ce soit une liste non ordonnée[^2].

Ce n'est pas le cas.

MERCI beaucoup de votre aide.