[Résolu] Créer un retour à la ligne grâce à ":after"

Bonjour,

Je me demandais s'il est possible de simuler le rendu de la balise <br/> grâce à la pseudo-classe :after. Pour ma part, je n'y suis pas arrivé...

Au fait, c'est juste de la curiosité

Cordialement,
Benjamin
Modifié par Benjamin D.C. (14 Dec 2006 - 21:56)

J'en doute, puisque, a priori, le contenui généré par le pseudo-élément ":after" ne peut pas contenir de code HTML ou, plutôt, s'il en contient, il ne sera pas interprêté... Maintenant, y a peut-être un workaround, mais comme ça, à froid, je ne vois pas...

Salut,

pas besoin de css, il existe la balise <pre></pre> .

Sam_Lam a écrit :
J'en doute, puisque, a priori, le contenui généré par le pseudo-élément ":after" ne peut pas contenir de code HTML ou, plutôt, s'il en contient, il ne sera pas interprêté... Maintenant, y a peut-être un workaround, mais comme ça, à froid, je ne vois pas...

Oui, c'est plutôt ça que je cherche: une méthode combinant des propriétés css créant un saut à la ligne. En fait, quelque chose "un peu" dans ce goût là:

:after {content:"."; padding-right:100%;}

Mais c'est moche et surtout, pas du tout fonctionnel.

Ralfman68 a écrit :
pas besoin de css, il existe la balise <pre></pre> .

Que veux-tu dire?
Modifié par Benjamin D.C. (14 Dec 2006 - 15:18)

bonjour,
Il parait impossible de surchargé le comportement de la balise "mere" sur ses pseudo after et before.

une balise inline , comuniquera ce comportement au pseudo et ne pourras a priori pas etre "surchargé" .


Pour une balise de type block , le "pseudo" ne te seras d'aucune utilité , un simple margin-bottom:1em; t'ajouteras une ligne vide .

css test pour des span :

span {display:block;}/* sinon effet nul ! */

span:before , span:after {
content:'';
display:block;
height:1em;

}

++

Ce que je cherche à faire sera peut-être plus simple avec un exemple. Voici ce que j'aimerais obtenir:

a écrit :
Jean-Bernard &
Edouard

Je le répète: il est évident qu'il n'agit là que d'une sorte de masturbation intellectuelle puisque un <br/> ferait naturellement tout à fait l'affaire...

ce que je voulais dire : plutôt que de créer une classe qui gère le retour à la ligne, pourquoi ne pas encadrer ton texte de la balise <pre> qui se comporte comme un <br /> classique

Ralfman68 a écrit :
ce que je voulais dire : plutôt que de créer une classe qui gère le retour à la ligne, pourquoi ne pas encadrer ton texte de la balise <pre> qui se comporte comme un <br /> classique

... et bien parce que je cherche justement à savoir par pure curiosité s'il est possible de créer cet effet grâce à la pseudo-classe en question!
Modifié par Benjamin D.C. (14 Dec 2006 - 15:28)

Bonjour,

Selon la spécification CSS line break se code \A pour du contenu généré.

Ce qui nous donnerait quelquechose du genre :

selecteur:after{
 content:'\A \A0';
}
\A0 pour coder un espace sinon pas de contenu...

Comme le précise gcyrillus, ça ne fonctionne pas avec des boites de type inline, ou du moins si : il suffit de leur affecter une propriété display:block, et donc de créer le saut de ligne qu'on veut créer :

span{
	display:block;
}
p span:after{
 display:block;
  content: "\A \A0"
}

Voilà pour la masturbation...

Sinon : :after et :before ne sont pas des pseudos classes mais des pseudos élements, la différence c'est qu'un pseudo élément créer dynamiquement une boite virtuelle dans le contenu restitué.

Les autres pseudos éléments sont first-letter et first-line.


Spécification CSS2 - 12.1 Les pseudo-éléments :before et :after

Jean-Pierre
Modifié par jpv (14 Dec 2006 - 17:29)

jpv a écrit :
Bonjour,

Selon la spécification CSS line break se code \A pour du contenu généré.

Ce qui nous donnerait quelquechose du genre :

selecteur:after{
 content:'\A \A0';
}
\A0 pour coder un espace sinon pas de contenu...

Comme le précise gcyrillus, ça ne fonctionne pas avec des boites de type inline, ou du moins si : il suffit de leur affecter une propriété display:block, et donc de créer le saut de ligne qu'on veut créer :

span{
	display:block;
}
p span:after{
 display:block;
  content: "\A \A0"
}

Voilà pour la masturbation...

Sinon : :after et :before ne sont pas des pseudos classes mais des pseudos élements, la différence c'est qu'un pseudo élément créer dynamiquement une boite virtuelle dans le contenu restitué.

Les autres pseudos éléments sont first-letter et first-line.


Spécification CSS2 - 12.1 Les pseudo-éléments :before et :after

Jean-Pierre

Hé bien, voilà qui est bien instructif! Je te remercie pour ces précisions bien intéressantes!
Modifié par Benjamin D.C. (14 Dec 2006 - 18:45)

Toujours dans les pseudos élements, est-il possible par un :before d'afficher ce caractère:

—

Il s'agit d'un "long tiret" (j'ignore le nom exact). J'ai essayé ces deux méthodes, mais aucune ne fonctionne:

span:before {content:"—"}
span:before {content:"—"}

Une idée?

Cordialement,
Benjamin
Modifié par Benjamin D.C. (14 Dec 2006 - 18:50)

Avec un code dans ce genre là (guillemets+espace fine) :

q:before {content: "\0000ab\2009"}

q:after {content: "\2009\0000bb"}

Mais je n'arrive plus à retrouver la liste pour le tiret sur cadratin.

Ah! Suis je bête! Il est dans la palette de caractères de mac OS X , donc pour toi c'est le :

span:before {content:"\2014"}

Modifié par Patidou (14 Dec 2006 - 21:33)

Patidou a écrit :
Ah! Suis je bête! Il est dans la palette de caractères de mac OS X , donc pour toi c'est le :

span:before {content:"\2014"}

Cela fonctionne parfaitement, merci 1000 fois!

Sujet enfin résolu

bonsoir,

je revient sur le sujet , car je viens de me souvenir d'une sombre histoire de text-indent sur la droite , probleme du même accabit , gerer tout simplement en final (un padding-right! , .... oui mais sur une balise block , donc normal).

Donc pour en revenir a ton saut de ligne aprés une balise en ligne (ou tu exprimer deja le desir d'appliquer un padding-right) , un truc serait d'inverser le flux , de façon a autoriser le padding a droite et non plus a gauche:
exemple sur un span :

span {direction:rtl;padding-right:50%;}

dans la serie titillons les mouches , voici le spanfoblock .

++

gcyrillus a écrit :
bonsoir,

je revient sur le sujet , car je viens de me souvenir d'une sombre histoire de text-indent sur la droite , probleme du même accabit , gerer tout simplement en final (un padding-right! , .... oui mais sur une balise block , donc normal).

Donc pour en revenir a ton saut de ligne aprés une balise en ligne (ou tu exprimer deja le desir d'appliquer un padding-right) , un truc serait d'inverser le flux , de façon a autoriser le padding a droite et non plus a gauche:
exemple sur un span :

span {direction:rtl;padding-right:50%;}

dans la serie titillons les mouches , voici le spanfoblock .

++

Bonjour,

Je t'avoue que je n'ai vraiment pas compris où tu voulais en venir Le problème du padding-right, c'est qu'il faut lui donner une mesure très précise sous peine de voir apparaître une barre de défilement horizontale ou, pire, le texte qui est fort décaler mais qui ne passe pas à la ligne... De plus, je ne vois pas bien l'utilité du direction:rtl; qui ne change en rien le rendu de ce code css.

Bonsoir

Benjamin D.C. a écrit :
... En fait, quelque chose "un peu" dans ce goût là:

:after {content:"."; padding-right:100%;}

Donc basiquement :
un padding de 50% + 1 caracteres , provoque un passage a la ligne.

Un element inline accepte un padding a gauche , quand l'affichage se fait de gauche a droite (dir="ltr"). et a droite quand l'affichage se fait de droite a gauche (dir="rtl").

Une page de test basique sur l'idée "theorique":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
<title>XHTML 1.0 Strict</title>
<style type='text/css'>
	span {direction:rtl;padding-right:50%;}
</style>
</head><body>
<span>	1234567890</span>
<span>	1</span>
<span>	1</span>
<span>	1</span>
</body></html>

Bon , avec ce test , on est convaincue qu'une balise de type inline peut forcer le renvoi d'une seconde a la ligne suivante , sans etre affublé d'un display:block; ,mais on est toujours dans le titillage de mouche , quand il suffissait de faire :

span:after {
content:'';
padding-left:100%;
}

Il n'y a aucune raison pour que le padding-left ne soit pas accepté , on reste dans le domaine du comportement "inline" .seul hic , IE ne connait pas vraiment le pseudo :after.

++