Thêm các thực thể HTML bằng nội dung CSS

Làm thế nào để bạn sử dụng thuộc tính CSS content để thêm các thực thể HTML ?

Sử dụng một cái gì đó như thế này chỉ in  ra màn hình thay vì không gian không phá vỡ:

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

Bạn phải sử dụng unicode đã thoát:

Giống

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

Thông tin thêm về: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS không phải là HTML.  là một tham chiếu ký tự được đặt tên trong HTML; tương đương với tham chiếu ký tự số thập phân  . 160 là điểm mã thập phân của NO-BREAK SPACEký tự trong Unicode (hoặc UCS-2 ; xem Đặc tả HTML 4.01 ). Biểu diễn thập lục phân của điểm mã đó là U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Bạn sẽ thấy rằng trong Biểu đồ và Cơ sở dữ liệu Ký tự Mã Unicode .

Trong CSS, bạn cần sử dụng chuỗi thoát Unicode cho các ký tự như vậy, dựa trên giá trị thập lục phân của điểm mã của ký tự. Vì vậy, bạn cần phải viết

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

Điều này hoạt động miễn là chuỗi thoát đến cuối cùng trong một giá trị chuỗi. Nếu các nhân vật làm theo, có hai cách để tránh giải thích sai:

a) (được đề cập bởi người khác) Sử dụng chính xác sáu chữ số thập lục phân cho chuỗi thoát:

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

b) Thêm một ký tự khoảng trắng (ví dụ: khoảng trắng) sau chuỗi thoát:

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

(Vì flà một chữ số thập lục phân, \a0fnếu không có nghĩa là GURMUKHI LETTER EEở đây, hoặc ਏ nếu bạn có một phông chữ phù hợp.)

Không gian màu trắng phân định sẽ bị bỏ qua và điều này sẽ được hiển thị  foo, trong đó không gian hiển thị ở đây sẽ là một NO-BREAK SPACEký tự.

Cách tiếp cận không gian trắng ( '\a0 foo') có những ưu điểm sau so với cách tiếp cận sáu chữ số ( '\0000a0foo'):

• việc nhập dễ dàng hơn , bởi vì các số 0 đứng đầu là không cần thiết và các chữ số không cần phải đếm;
• Nó dễ đọc hơn , bởi vì có khoảng trắng giữa chuỗi thoát và văn bản theo sau, và các chữ số không cần phải đếm;
• nó đòi hỏi ít không gian hơn , bởi vì các số 0 đứng đầu là không cần thiết;
• nó tương thích lên trên , bởi vì các điểm mã hỗ trợ Unicode ngoài U + 10FFFF trong tương lai sẽ yêu cầu sửa đổi Đặc tả CSS.

Do đó, để hiển thị một khoảng trắng sau một ký tự thoát, sử dụng hai khoảng trắng trong biểu định kiểu -

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

- hoặc làm cho nó rõ ràng:

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

Xem CSS 2.1, phần "4.1.3 Ký tự và trường hợp" để biết chi tiết.

Cập nhật : PointedEars đề cập rằng vị trí chính xác  trong tất cả các tình huống css sẽ
'\a0 'ngụ ý rằng không gian là một đầu cuối của chuỗi hex và được hấp thụ bởi chuỗi thoát. Ông tiếp tục chỉ ra mô tả có thẩm quyền này có vẻ như là một giải pháp tốt cho vấn đề tôi đã mô tả và khắc phục dưới đây.

Những gì bạn cần làm là sử dụng unicode đã thoát. Mặc dù những gì bạn đã nói \00a0không phải là một điểm nhấn hoàn hảo cho  CSS; hãy thử

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

Cụ thể sử dụng \0000a0như  . Nếu bạn cố gắng, như được đề xuất bởi mathieu và millikin:

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

Nó đưa B vào các ký tự thoát hex. Điều tương tự xảy ra với 0-9a-fA-F.

Trong CSS, bạn cần sử dụng chuỗi thoát Unicode thay cho các Thực thể HTML. Điều này dựa trên giá trị thập lục phân của một ký tự.

Tôi thấy rằng cách dễ nhất để chuyển đổi biểu tượng thành tương đương thập lục phân của chúng là, chẳng hạn như từ ▾ ( ▾) \25BEsang sử dụng máy tính Microsoft =)

Đúng. Bật chế độ lập trình viên, bật hệ thống thập phân, nhập 9662, sau đó chuyển sang hex và bạn sẽ nhận được 25BE. Sau đó, chỉ cần thêm một dấu gạch chéo ngược \vào đầu.

Sử dụng mã hex cho một không gian không phá vỡ. Một cái gì đó như thế này:

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

Có một cách để dán nbsp- mở CharMap và sao chép ký tự 160 . Tuy nhiên, trong trường hợp này có lẽ tôi sẽ tạo khoảng trống bằng phần đệm, như thế này:

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

Bạn có thể cần phải đặt mẩu bánh mì display:inline-blockhoặc một cái gì đó, mặc dù.

Ví dụ :

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

Ví dụ: Nếu bạn muốn chọn nhân vật của mình, tôi đã chọn "& # 8620" "& # x21ac" (Chúng tôi sử dụng các giá trị HEX )

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

Kết quả:

Đó là nó :)

Tôi biết đây là một bài viết khá cũ, nhưng nếu khoảng cách là tất cả sau đó của bạn, tại sao không chỉ đơn giản là:

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

Tôi đã sử dụng phương pháp này trước đây. Nó kết thúc hoàn hảo tốt cho các dòng khác với ">" bên cạnh thử nghiệm của tôi.

Đây là hai cách:

• Trong HTML:

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

Điều này sẽ dẫn đến

• Trong Css:

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

với mã HTML <div class="ics"></div>

Điều này cũng dẫn đến