Comment insérer un saut de ligne avant un élément à l’aide de CSS

Question

Je sens que j’ai vu une certaine manière, à l’aide de la propriété content de la CSS, pour insérer une balise de saut de ligne avant un élément. Évidemment, cela ne fonctionne pas :

Mais comment faites-vous cela ?

Answer 1

Il est possible en utilisant le `` séquence d’échappement dans le contenu de Pseudo-périphérique-élément généré. Lire la suite dans la Spécification CSS2.

Vous devrez peut-être également ajouter à .

Remarque : `` dénote la fin d’une ligne.

Answer 2

Si #restart est un élément inline (par exemple, <span>, <em> etc) ensuite, vous pouvez transformer en un élément de bloc à l'aide de:

#restart { display: block; }

Cela aura pour effet d'assurer un saut de ligne avant et après l'élément.

Il n'y a pas un moyen d'avoir CSS insérer quelque chose qui agit comme un saut de ligne uniquement avant un élément, et pas après. Vous pourriez peut-être provoquer un saut de ligne avant comme un effet secondaire d'autres modifications, par exemple float: leftou clear: left après une flottait élément, ou même quelque chose de fou comme #restart:before { content: 'a load of non-breaking spaces'; } mais ce n'est probablement pas une bonne idée dans le cas général.

Answer 3

Cela fonctionne pour moi :

Answer 4

Il suffit de mettre un caractère unicode dans l’avant pseudo élément :

Answer 5

Il y a deux raisons pour lesquelles vous ne pouvez pas ajouter de contenu généré via du CSS dans la façon dont vous le souhaitez:

1. le contenu généré accepte le contenu et pas de balisage. Le balisage ne sera pas évalué, mais affiche seulement.

2. :before et :after le contenu généré est ajouté à l'intérieur de l'élément, de sorte que même l'ajout d'un espace ou d'une lettre et de le définir en tant que block ne fonctionnera pas.

Il y a un ::outside pseudo élément qui pourrait faire ce que vous voulez. Cependant, il ne semble pas prise en charge du navigateur. (Lire la suite ici: http://www.w3.org/TR/css3-content/#wrapping)

Meilleur pari est d'utiliser un peu de jQuery ici:

$('<br />').insertBefore('#restart');

Exemple: http://jsfiddle.net/jasongennaro/sJGH9/1/