Ajouter un saut de ligne à :: après ou :: avant le contenu du pseudo-élément

Je n'ai pas accès au HTML ou au PHP d'une page et ne peux éditer que via CSS. J'ai fait des modifications sur un site et l' ajout de texte via le ::afterou ::beforepseudo-éléments et ont trouvé que la fuite Unicode doit être utilisé pour des choses comme un espace avant ou après le contenu ajouté.

Comment ajouter plusieurs lignes dans la contentpropriété?

Dans l'exemple, l'élément de ligne de rupture HTML sert uniquement à visualiser ce que je souhaite réaliser:

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

La contentpropriété indique:

Les auteurs peuvent inclure des retours à la ligne dans le contenu généré en écrivant la séquence d'échappement "\ A" dans l'une des chaînes après la propriété 'content'. Ce saut de ligne inséré est toujours soumis à la propriété 'white-space'. Voir "Chaînes" et "Caractères et casse" pour plus d'informations sur la séquence d'échappement "\ A".

Vous pouvez donc utiliser:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

Cependant, lors de l'échappement de chaînes arbitraires, il est conseillé d'utiliser à la \00000aplace de \A, car tout nombre ou [a-f]caractère suivi de la nouvelle ligne peut donner des résultats imprévisibles :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

Bel article expliquant les bases (ne couvre cependant pas les sauts de ligne).

Un tas de choses incroyables que des pseudo éléments peuvent faire

Si vous avez besoin d'avoir deux éléments en ligne où l'un entre dans la ligne suivante dans un autre élément, vous pouvez le faire en ajoutant un pseudo-élément: after with content: '\ A' et white-space: pre

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

Je devais avoir de nouvelles lignes dans une info-bulle. J'ai dû ajouter ce CSS sur mon: après:

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

Le word-wrap semble nécessaire.

De plus, le \ A ne fonctionnait pas au milieu du texte à afficher, pour forcer une nouvelle ligne.

 
 

travaillé. J'ai alors pu obtenir une telle info-bulle:

Vous pouvez essayer ceci

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

Js Fiddle

Pour les personnes qui chercheront "Comment modifier dynamiquement le contenu d'un pseudo élément en ajoutant un nouveau signe de ligne", voici la réponse

Caractères HTML comme 
 ne fonctionneront pas en les ajoutant au code HTML à l'aide de JavaScript, car ces caractères sont modifiés lors du rendu du document

Au lieu de cela, vous devez trouver une représentation unicode de ces caractères qui sont U + 000D et U + 000A afin que nous puissions faire quelque chose comme

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div> 

J'espère que cela fera gagner du temps à quelqu'un, bonne chance :)

Ajouter un saut de ligne ::afterou un ::beforepseudo-élément au contenu

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

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

On dirait que vous pouvez utiliser \Aou \00000apour obtenir unnewline

<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>

Les classes .mbr et .dbr peuvent simuler un comportement de saut de ligne en utilisant CSS display: table . Utile si vous voulez remplacer du vrai <br />.

Découvrez cette démo Codepen: https://codepen.io/Marko36/pen/RBweYY ,
et cet article sur l'utilisation du site réactif: Sauts de ligne réactifs: simuler <br /> à des points d'arrêt donnés .