CSS偽類:before是一種非常有用的技術，可以使我們在HTML元素前添加內容，這些內容可以是文本、圖標或圖片。在這篇文章中，我們將討論如何使用CSS偽類:before添加圖片。 要使用CSS偽類:before添加圖片，我們需要使用CSS的content屬性。content屬性用于定義在一個元素前面或內部生成的內容，所以我們可以在:before選擇器中定義它。 下面是一個示例代碼，演示如何在:before選擇器中使用content屬性來添加圖片： ```

This is a paragraph.

``` 在上面的代碼中，我們使用了CSS偽類:before，將一個圖像文件(img.png)的路徑添加到了content屬性中。這個選擇器對所有的段落（p）元素都有效果，所以在這個段落前面會顯示這張圖片。 我們還可以使用CSS偽類:before添加其他樣式，比如一些文本、圖標或其他的元素。下面是一些示例代碼，演示如何使用:before選擇器來添加其他元素： ```

This is a paragraph.

``` 在上面的代碼中，我們使用了CSS偽類:before，將“>>”這段文本添加到content屬性中，并為這段文本添加了紅色的顏色。 除此之外，我們還可以使用:before選擇器來添加一些CSS3的動畫效果，如旋轉、縮放、位移等等。下面是一些示例代碼，演示如何使用:before選擇器來添加動畫效果： ```

This is a preformatted text.

``` 在上面的代碼中，我們使用了CSS偽類:before，定義了一個紅色的塊，然后使用“animation”屬性定義一個名為“move”的動畫，將這個塊向右側移動200px。 總的來說，CSS偽類:before非常有用，可以用來添加各種元素、樣式和動畫效果，讓我們的網頁更加生動有趣。在使用:before選擇器時，必須要注意元素的層疊問題，以免出現意料之外的效果。