CSS中的內容屬性

Question

在某些模板中，我看到使用CSS創建的箭頭。是這樣的：

div:after{ 
    content:"\f107"; 
} 

這段代碼顯示這樣一個箭頭：

這是什麼碼？在哪裏我可以找到更多的代碼？

Answer 1

使用content屬性嵌入了一個元素中的虛擬內容，它是用來與僞:before或:after，所以如果你使用:before，內容將被嵌入前。

從MDN：

的content CSS屬性用於與::before和::after 僞元素，以生成式中的元件的內容。插入對象 使用content屬性是匿名replaced elements。

內容屬性可以容納任何character,number,entities。欲瞭解更多信息，你可以參考文章here。

此外，你可以得到一個方便的轉換器here。

---

這種方法也被font-awesome - Example等相關SVG字體嵌入庫，在那裏你可以簡單地調用類的元素和字體都將嵌入虛擬。

---

而且，只是一個側面的信息，使用CSS content屬性生成的內容是inline默認情況下，這也呈現inside的元素，而不是外界..

Answer 2

這是一個escaped unicode character。

Answer 3

CSS content屬性：內容屬性用於：before和：after僞元素之後，插入生成的內容。

Read more

Answer 4

至於其他的答案已經解釋的那樣，CSS規則使用content財產由其Unicode數字插入字符。

但是，使用的字符是U + F107 PRIVATE USE CHARACTER -F107。這意味着它除私人協議外沒有任何意義，不應該用於公共信息交換。不幸的是，一些「真棒」技巧使用私人使用代碼點來插入圖形符號。這意味着，除非使用特定的字體，並使用分配給這些代碼點的某些符號，否則會出現未知字符的通用符號。

因此，在正確的內容中使用圖片要安全得多。

Answer 5

CSS有一個名爲content的屬性。它只能與僞元素:after和:before一起使用。它被寫爲一個僞選擇符（帶有冒號），但它被稱爲僞元素，因爲它實際上並未選擇頁面上存在的任何內容，而是向頁面添加了新內容。

Font Awesome是一種網頁字體，包含來自Twitter Bootstrap框架的所有圖標，現在還有更多。

你可以找到FontAwesome這裏的列表：A list of Font Awesome icons and their CSS content values

您也可以通過這個鏈接，FontAwesome Examples，在那裏你可以看到不同的圖標，以及如何在其應用不同的大小。