Ajouter un saut de ligne au contenu du pseudo-élément ::after ou ::before

Question

Je n'ai pas accès au HTML ou au PHP d'une page et je ne peux la modifier que par le biais du CSS. J'ai effectué des modifications sur un site et ajouté du texte par le biais de l'interface CSS. ::after o ::before et ont constaté que l'escape Unicode doit être utilisé pour des choses telles qu'un espace avant ou après le contenu ajouté.

Comment ajouter plusieurs lignes dans le content la propriété ?

Dans l'exemple, l'élément HTML break line est seulement pour visualiser ce que je souhaite réaliser :

#headerAgentInfoDetailsPhone::after {
  content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

Answer 1

Ajouter un saut de ligne à ::after o ::before contenu du pseudo-élément

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

Answer 2

J'ai trouvé cette question ici qui semble demander la même chose : Séquence de caractères Newline dans la propriété CSS 'content' ?

On dirait que vous pouvez utiliser \A o \00000a pour atteindre un newline

Answer 3

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

Le site .mbr y .dbr peuvent simuler le comportement du saut de ligne à l'aide de CSS display:table . Utile si vous voulez remplacer les <br /> réels.

Regardez cette démo Codepen : https://codepen.io/Marko36/pen/RBweYY ,
et ce billet sur l'utilisation des sites réactifs : Sauts de ligne réactifs : simuler <br /> à des points d'arrêt donnés .