日常開發中，我們常用:before,:after來實現一些效果，比如
– 邊框
– 圖標
此時的content中只是為了偽元素能渲染出來而聲明
| 1 2 3 |
div:before{ content: ""; } |
事實上，content屬性不僅僅支持字符串，也支持一些內置的css方法。
使用content: attr(arribute-name)可以實現HTML與CSS的“通訊”，使得偽元素能讀取當前元素的屬性。看以下例子
在圖中，要實現多行文本的自動截斷，然而，設計上還在第三行末尾增加了一個小箭頭，沒辦法使用簡單粗暴的flex-box的-webkit-line-clamp:3來搞定。
通過拜讀移動端做文本尾行留空截斷處理的一個方案 ， 實現了這個效果。
這時就可以用偽元素了。具體實現上，before和after均通過content獲取文本，before展示前兩行，而after則通過padding-right與text-indent的配合，給箭頭騰了個空位。
當然，這只是attr的一個應用場景，還可以通過content來實現一個自定義的tooltip等等。
content屬性還支持url方法嵌入圖片
| 1 |
content: url('./image.png'); |
不過可控性沒有background-image高，所以實際場景中較少用到。
以及counter方法實現自增，在此不多加敘述。