僞元素content的應用

平常開發中，咱們經常使用: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方法實現自增，在此很少加敘述。