如何使用CSS content屬性添加html實體？使用CSS內容添加HTML實體
我有一些鏈接，我通過在每個之前添加一個箭頭來製作一個麪包屑樣式列表。
<div class="breadcrumbs">
<a>One</a>
<a>Two</a>
<a>Three</a>
</div>
其中應用了以下樣式：
.breadcrumbs a:before {
content: '> ';
}
的問題是，當面包屑名單會越來越長，換到下一行，箭頭留在前面的行上。顯而易見的解決辦法是改變空間變成一個非換空間，但是這並不工作：
.breadcrumbs a:before {
content: '> ';
}
它實際上輸出 到屏幕上。我通過直接粘貼字符來解決其他奇怪字符（如»），但是如何粘貼 ？
您必須使用轉義的unicode：
像
.breadcrumbs a:before {
content: '>\0000a0';
}
更多信息上：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
使用非破壞空間的十六進制代碼。事情是這樣的：
.breadcrumbs a:before {
content: '>\00a0';
}
更新：PointedEars提到，正確的立場在所有css情況下爲 將是
'\a0 '暗示該空格是十六進制字符串的終止符，並被轉義序列吸收。他進一步指出這個authoritative description這聽起來像是我在下面描述和解決的問題的一個很好的解決方案。
你需要做的是使用轉義的unicode。儘管你被告知\00a0不是CSS中 的完美替身，所以嘗試：
content:'>\a0 '; /* or */
content:'>\0000a0'; /* because you'll find: */
content:'No\a0 Break'; /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */
具體使用\0000a0作爲 。 如果你嘗試，因爲建議的馬修和米利：
content:'No\00a0Break' /* becomes No਋reak */
它考慮到了十六進制轉義字符的B中。 0-9a-fA-F也發生同樣的情況。
有一種方法來粘貼nbsp - 打開CharMap和複製字符160。然而，在這種情況下，我可能會用填充空間出來，像這樣：
.breadcrumbs a:before { content: '>'; padding-right: .5em; }
您可能需要設置麪包屑display:inline-block什麼的，雖然。
在CSS中，您需要使用Unicode轉義序列來代替HTML實體。這是基於一個字符的十六進制值。
我發現，符號轉換成相應的十六進制等價最簡單的方法是，如▾（▾）到\25BE是使用微軟計算器=）
是。啓用程序員模式，打開十進制系統，輸入9662，然後切換到十六進制，你會得到25BE。然後在開頭添加一個反斜槓\。
CSS不是HTML。 是HTML中的一個名爲character reference;相當於十進制數字字符引用 。 160是小數點代碼點的NO-BREAK SPACE字符Unicode（或UCS-2;請參閱HTML 4.01 Specification）。該代碼點的十六進制表示是U + 00A0（160 = 10×16 + 0×16 ）。你會發現在Unicode Code Charts和Character Database。
在CSS中，您需要爲這些字符使用Unicode轉義序列，這些字符基於字符代碼點的十六進制值。所以你需要寫
.breadcrumbs a:before {
content: '>\a0';
}
這隻要轉義序列最後一個字符串值的最後一個工作。如果字符跟隨，有兩種方法，以避免誤解：
一）（別人提到）使用轉義序列精確六個十六進制數字：
.breadcrumbs a:before {
content: '>\0000a0foo';
}
B）添加一個空格（例如，轉義序列後空格）性格：
.breadcrumbs a:before {
content: '>\a0 foo';
}
（由於f是十六進制數字，\a0f否則將意味着GURMUKHI LETTER EE這裏，或ਏ如果你有一個合適的字體）
分隔空白將被忽略，並且將顯示> foo，其中顯示的空格將是NO-BREAK SPACE字符。
白色空間方法（'\a0 foo'）擁有超過六位數的方法如下優點（'\0000a0foo'）：
因此，爲了顯示一個轉義字符後面輸入一個空格，在樣式表中使用空間 -
.breadcrumbs a:before {
content: '>\a0 foo';
}
- 或使其明確：
.breadcrumbs a:before {
content: '>\a0\20 foo';
}
例如：
http://character-code.com/arrows-html-codes.php
例如：如果你想選擇你的性格，我選擇了 「&＃8620」， 「&＃x21ac」（我們使用HEX值）
.breadcrumbs a:before {
content: '\0021ac';
}
結果：↬
Tha TS吧:)
這裏有兩種方法：
在HTML：
<div class="ics">⛱</div>
這將導致到 ⛱
在CSS中：
.ics::before {content: "\9969;"}
與HTML代碼<div class="ics"></div>
這也導致⛱
我知道這是一個很老的文章，但如果間距都是你的之後，爲什麼不簡單：
.breadcrumbs a::before {
content: '>';
margin-left: 8px;
margin-right: 8px;
}
我以前用過這種方法。它在我的測試中完美地適用於其他帶有「>」的線條。
從另一種意義上說，使用CSS添加內容違反了關注點的分離，CSS僅適用於樣式定義。從可訪問性的角度來看，最好避免使用CSS，因爲禁用了CSS可以將整個標記加起來。但是，使用這種技術添加圖像是很好的。 – questzen 2008-10-10 08:03:30
這取決於。在這種情況下，它用於演示目的。它會「違反」SoC將「>」放入html – mathieu 2008-10-10 09:11:00
只是一個問題，你認爲最好是有序列表嗎？我的意思是，這是一個訂單不是嗎？ – alex 2009-03-20 05:36:52