Pouvez-vous forcer un saut de ligne après un élément en utilisant uniquement CSS ?

Création de sauts de ligne avec CSS

Besoin d'un saut de ligne, mais vous ne souhaitez pas ajouter de balises HTML supplémentaires ? CSS a ce qu'il vous faut ! Voici comment réaliser un saut de ligne après un élément spécifique comme un

 :

Question :

Pouvez-vous forcer un saut de ligne après un élément en utilisant uniquement du CSS , sans ajouter de balises HTML ?

Défi :

Supposons que nous ayons un

élément niché dans un

 :

<code class="html"><li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li></code>

Copier après la connexion

Nous voulons un saut de ligne après l'élément

mais pas avant, tout en le gardant en ligne. Cependant, le réglage display: block; n'est pas une option car cela perturberait le positionnement de l'élément.

Solution :

Avec un CSS intelligent, nous pouvons y parvenir :

<code class="css">h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}</code>

Copier après la connexion

Explication :

• affichage : en ligne ; conserve le

  élément sur la même ligne.

• h4:after crée un pseudo-élément après le

  et insère le caractère Unicode "a" (saut de ligne).

• white-space: pre; garantit que le saut de ligne inséré est visible.

Exemple :

Découvrez ce violon pour une démo en direct : http://jsfiddle.net/Bb2d7 /

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!