CSS中的:before偽元素可以在一個元素之前插入內容。它可以與content屬性一起使用來創建很多有趣的效果。

p:before {
content: '這是在段落前插入的內容';
color: red;
font-weight: bold;
}

在上面的代碼中，我們使用:before偽元素向所有段落之前插入了一些文本。這些文本會顯示為紅色粗體字。

當然，我們也可以使用:before偽元素來插入其他內容，比如圖片或圖標。

p:before {
content: url('image.png');
}

在上面的代碼中，我們使用:before偽元素插入了一個名為“image.png”的圖片。這個圖片會出現在所有段落之前。

需要注意的是，在使用:before偽元素時，必須要指定content屬性的值。如果content屬性的值為空，偽元素是不會起作用的。

此外，也可以使用:after偽元素來在元素后插入內容，使用方法與:before偽元素類似。

p:after {
content: '這是在段落后插入的內容';
color: blue;
font-style: italic;
}

在上面的代碼中，我們使用:after偽元素向所有段落之后插入了一些文本。這些文本會顯示為藍色斜體字。

總之，使用:before偽元素可以輕松地在元素之前插入文本、圖片等內容，為頁面效果增色不少。