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

Le site content les états de la propriété :

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

Donc vous pouvez utiliser :

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

http://jsfiddle.net/XkNxs/

Toutefois, pour l'échappement de chaînes de caractères arbitraires, il est conseillé d'utiliser la fonction \00000a au lieu de \A parce que n'importe quel nombre ou [a-f] suivi de la nouvelle ligne peut donner résultats imprévisibles :

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

Answer 2

Bel article expliquant les principes de base (il ne couvre toutefois pas les sauts de ligne).

Un tas de trucs étonnants que les pseudo-éléments peuvent faire

Si vous avez besoin de deux éléments en ligne dont l'un s'insère dans la ligne suivante d'un autre élément, vous pouvez le faire en ajoutant un pseudo-élément :after dont le contenu est :'. \A et espace blanc : 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;
}

Answer 3

Je devais avoir de nouvelles lignes dans une infobulle. J'ai dû ajouter ce CSS sur mon :after :

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

Le retour à la ligne semble nécessaire.

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

 
 

travaillé. J'ai ensuite pu obtenir une telle infobulle :

Answer 4

Vous pouvez essayer ceci

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

Js Fiddle

Answer 5

Pour les personnes qui vont chercher "Comment changer dynamiquement le contenu d'un pseudo-élément en ajoutant un nouveau signe de ligne", voici la réponse.

Des caractères Html comme 
 ne fonctionnera pas en les ajoutant au html en utilisant JavaScript car ces caractères sont modifiés lors du rendu du document.

Au lieu de cela, vous devez trouver la représentation unicode de ces caractères, qui sont U+000D et U+000A, de sorte que nous pouvons 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 :)