Menambahkan entitas HTML menggunakan konten CSS

Bagaimana Anda menggunakan properti CSS content untuk menambahkan entitas HTML ?

Menggunakan sesuatu seperti ini hanya mencetak  ke layar alih-alih ruang yang tidak putus:

.breadcrumbs a:before {
    content: ' ';
}

Anda harus menggunakan kode kunci yang diloloskan:

Suka

.breadcrumbs a:before {
    content: '\0000a0';
}

Info lebih lanjut tentang: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS bukan HTML.  adalah referensi karakter bernama dalam HTML; setara dengan referensi karakter numerik desimal  . 160 adalah desimal titik kode dari NO-BREAK SPACEkarakter dalam Unicode (atau UCS-2 , melihat HTML 4.01 Specification ). Representasi heksadesimal dari titik kode tersebut adalah U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Anda akan menemukan itu di Bagan Kode Unicode dan Database Karakter .

Dalam CSS Anda perlu menggunakan urutan pelepasan Unicode untuk karakter tersebut, yang didasarkan pada nilai heksadesimal dari titik kode karakter. Jadi kamu perlu menulis

.breadcrumbs a:before {
  content: '\a0';
}

Ini berfungsi selama urutan pelarian datang terakhir dalam nilai string. Jika karakter mengikuti, ada dua cara untuk menghindari salah tafsir:

a) (disebutkan oleh orang lain) Gunakan tepat enam digit heksadesimal untuk urutan pelarian:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) Tambahkan satu karakter spasi putih (mis. spasi) setelah urutan escape:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(Karena fmerupakan digit heksadesimal, \a0fartinya di GURMUKHI LETTER EEsini, atau ਏ jika Anda memiliki font yang sesuai.)

Ruang putih pembatas akan diabaikan, dan ini akan ditampilkan  foo, di mana ruang yang ditampilkan di sini adalah NO-BREAK SPACEkarakter.

Pendekatan white-space ( '\a0 foo') memiliki keunggulan berikut dibandingkan pendekatan enam digit ( '\0000a0foo'):

• itu adalah lebih mudah untuk tipe , karena nol terkemuka tidak diperlukan, dan angka tidak perlu dihitung;
• itu adalah mudah dibaca , karena ada putih-ruang antara urutan escape dan teks berikut, dan angka tidak perlu dihitung;
• itu membutuhkan ruang kurang , karena nol terkemuka tidak diperlukan;
• itu kompatibel ke atas , karena Unicode yang mendukung titik kode di luar U + 10FFFF di masa mendatang akan memerlukan modifikasi Spesifikasi CSS.

Jadi, untuk menampilkan spasi setelah karakter yang keluar, gunakan dua spasi dalam stylesheet -

.breadcrumbs a:before {
  content: '\a0  foo';
}

- atau membuatnya eksplisit:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

Lihat CSS 2.1, bagian "4.1.3 Karakter dan huruf" untuk detail.

Pembaruan : PointedEars menyebutkan bahwa stand yang benar untuk  dalam semua situasi css akan
'\a0 'menyiratkan bahwa ruang adalah terminator ke string hex dan diserap oleh urutan lolos. Dia lebih jauh menunjukkan deskripsi otoritatif ini yang terdengar seperti solusi yang baik untuk masalah yang saya uraikan dan perbaiki di bawah.

Yang perlu Anda lakukan adalah menggunakan unicode kabur. Meskipun apa yang telah diberitahukan kepada Anda \00a0bukanlah dukungan sempurna  dalam CSS; jadi cobalah:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

Khusus menggunakan \0000a0sebagai  . Jika Anda mencoba, seperti yang disarankan oleh mathieu dan millikin:

content:'No\00a0Break'   /* becomes No਋reak */

Dibutuhkan B ke dalam karakter hex lolos. Hal yang sama terjadi dengan 0-9a-fA-F.

Di CSS Anda perlu menggunakan urutan pelepasan Unicode sebagai pengganti Entitas HTML. Ini didasarkan pada nilai heksadesimal karakter.

Saya menemukan bahwa cara termudah untuk mengkonversi simbol ke ekivalen heksadesimal mereka adalah, seperti dari ▾ ( ▾) \25BEadalah dengan menggunakan kalkulator Microsoft =)

Iya. Aktifkan mode programmer, nyalakan sistem desimal, masuk 9662, lalu beralih ke hex dan Anda akan mendapatkannya 25BE. Kemudian tambahkan saja garis miring terbalik \ke awal.

Gunakan kode hex untuk ruang yang tidak melanggar. Sesuatu seperti ini:

.breadcrumbs a:before {
    content: '>\00a0';
}

Ada cara untuk menempelkan nbspCharMap yang terbuka dan menyalin karakter 160 . Namun, dalam hal ini saya mungkin akan mengeluarkannya dengan bantalan, seperti ini:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

Anda mungkin perlu mengatur remah roti display:inline-blockatau sesuatu.

Sebagai contoh :

http://character-code.com/arrows-html-codes.php

Contoh: Jika Anda ingin memilih karakter Anda, saya memilih "& # 8620" "& # x21ac" (Kami menggunakan nilai HEX )

.breadcrumbs a:before {
    content: '\0021ac';
}

Hasil: ↬

Itu dia :)

Saya tahu ini adalah posting yang cukup lama, tetapi jika spasi adalah milik Anda, mengapa tidak cukup:

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

Saya telah menggunakan metode ini sebelumnya. Itu membungkus dengan sangat baik untuk baris lain dengan ">" di sisinya dalam pengujian saya.

Berikut ini dua cara:

• Dalam HTML:

  <div class="ics">&#9969;</div>

Ini akan menghasilkan ⛱

• Dalam Css:

  .ics::before {content: "\9969;"}

dengan kode HTML <div class="ics"></div>

Ini juga menghasilkan ⛱