Tambahkan jeda baris ke :: setelah atau :: sebelum konten elemen pseudo

Saya tidak memiliki akses ke HTML atau PHP untuk satu halaman dan hanya dapat mengedit melalui CSS. Saya telah melakukan modifikasi pada situs dan menambahkan teks melalui elemen ::afteratau ::beforepseudo dan menemukan bahwa escape Unicode harus digunakan untuk hal-hal seperti spasi sebelum atau setelah konten yang ditambahkan.

Bagaimana cara menambahkan beberapa baris di contentproperti?

Sebagai contoh elemen break line HTML hanya untuk memvisualisasikan apa yang ingin saya capai:

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

The contentnegara properti:

Penulis dapat menyertakan baris baru dalam konten yang dihasilkan dengan menulis urutan melarikan diri "\ A" di salah satu string setelah properti 'konten'. Jeda baris yang dimasukkan ini masih tunduk pada properti 'ruang putih'. Lihat "String" dan "Karakter dan huruf" untuk informasi lebih lanjut tentang urutan melarikan diri "\ A".

Jadi Anda bisa menggunakan:

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

http://jsfiddle.net/XkNxs/

Saat melarikan diri dari string arbitrer, bagaimanapun, disarankan untuk menggunakannya \00000asebagai ganti \A, karena angka atau [a-f]karakter apa pun yang diikuti oleh baris baru dapat memberikan hasil yang tidak terduga :

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

Artikel yang bagus menjelaskan dasar-dasarnya (tidak mencakup jeda baris).

Sekelompok Banyak Hal Luar Biasa yang Dapat Dilakukan Pseudo Elements

Jika Anda perlu memiliki dua elemen sebaris di mana seseorang masuk ke baris berikutnya dalam elemen lain, Anda dapat melakukannya dengan menambahkan elemen pseudo: setelah dengan konten: '\ A' dan 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;
}

Saya harus memiliki baris baru di tooltip. Saya harus menambahkan CSS ini di: setelah:

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

Kata-bungkus sepertinya perlu.

Selain itu, \ A tidak berfungsi di tengah teks untuk ditampilkan, untuk memaksa baris baru.

 
 

bekerja. Saya kemudian bisa mendapatkan tooltip seperti itu:

Anda dapat mencoba ini

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

Js Fiddle

Untuk orang yang akan mencari 'Bagaimana mengubah konten dinamis pada elemen semu menambahkan tanda baris baru "inilah jawabannya

Karakter HTML seperti 
tidak akan berfungsi menambahkannya ke HTML menggunakan JavaScript karena karakter tersebut diubah pada render dokumen

Alih-alih, Anda perlu menemukan representasi unicode dari karakter ini yaitu U + 000D dan U + 000A sehingga kami dapat melakukan sesuatu seperti

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> 

Semoga ini menghemat waktu, semoga berhasil :)

Tambahkan jeda baris ::afteratau ::beforekonten elemen semu

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

Menemukan pertanyaan ini di sini yang sepertinya menanyakan hal yang sama: Urutan karakter baris baru di properti 'konten' CSS?

Sepertinya Anda dapat menggunakan \Aatau \00000auntuk mencapai anewline

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

Kelas .mbr dan .dbr dapat mensimulasikan perilaku line-break menggunakan tampilan CSS : table . Berguna jika Anda ingin mengganti <br /> nyata.

Lihat demo Codepen ini: https://codepen.io/Marko36/pen/RBweYY ,
dan postingan ini tentang penggunaan situs responsif : Pemutus baris responsif: simulasikan <br /> pada breakpoints yang diberikan .